Fullcalendar限制可用月份的显示？

Question

我想知道如何限制fullcalendar显示三个月的时间段,并在其他几个月内取消选择,例如在datepicker中？

例如,当前月份是2010年5月,我只希望日历显示5月和4月(点击上个月)和Jun(点击下个月),其余月份将从用户选择中取消选择.

我不确定我是否错过了阅读fullcalendar文档中的任何部分.好心提醒.谢谢.

Answer 1

对于版本2中的FullCalendar更改viewDisplay : function(view) {为 viewRender: function(view,element) { (此页面示例中的混合解决方案):

  $('#calendar').fullCalendar({

       //restricting available dates to 2 moths in future
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth() + 2); //Adjust as needed

            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
  });

Answer 2

这是基于牛头人的答案,但包括必要的日期数学和全日历选择器以将其拉出(此代码使用12个月的范围):

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 3

我还没有这样做过，所以我不确定这是否有效。但你至少可以尝试看看。

我可能会考虑自定义回调viewDisplay。它接收一个包含属性等的视图对象。start您可以使用 View 对象属性来测试用户正在查看的视图和日期，然后根据它执行操作。

我不确定 fullcalendar 是否以这种方式工作，但如果您return false通过回调，某些插件将中止操作。因此，您可以检查start日期，如果超出了可接受的月份范围，则return false中止操作。

如果这不起作用，viewDisplay您可以再次检查start日期。如果下个月或上个月超出范围，那么您可以使用 jQuery 选择器来获取上一个/下一个按钮并禁用它们。这样用户将无法切换到超出范围的月份。

此外，如果用户所在月份超出范围，您可以立即发出命令gotoDate以切换到有效月份。

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

有很多方法可以进行逻辑和日期数学计算，但我认为你可以通过这种方式得到一些东西。