Fullcalendar 限制显示可用月份？

Question

我想了解如何将完整日历限制为显示三个月的时间段并在其余月份中取消选择，例如在日期选择器中？

例如当前月份是 2010 年 5 月，我只希望日历显示 May 和 Apr（单击上个月）和 Jun（单击下个月），其余月份将从用户选择中取消选择。

我不确定我是否错过了阅读完整日历文档的任何部分。好心提醒。谢谢。

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

这基于tauren 的answer，但包括必要的日期数学和完整日历选择器以实现它（此代码使用 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 回调。它接收一个View Object，其中包含一个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
        }
    }
});

有很多方法可以在其中进行逻辑和日期数学运算，但我认为您可以通过这种方式得到一些工作。

Answer 4

您可以使用该选项

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            validRange: {
                start: '2017-05-01',//start date here
                end: '2017-07-01' //end date here
            },
            defaultDate: '2017-05-12'
            });

Answer 5

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

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

            }

Answer 6

 $('#calendar').fullCalendar({
            viewDisplay   : function(view) {
                var now = new Date(); 
                var end = new Date();
                var begin =  new Date ();

                end.setMonth(now.getMonth() + 12); //Adjust as needed
                begin.setMonth(now.getMonth() - 12); //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();
                var begin_date_string = begin.getMonth()+'/'+begin.getFullYear();

                if(cal_date_string == begin_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 7

我遇到了类似的情况：我有一个活动计划，并希望将 Fullcalendar 限制在活动的日期范围内（例如，12 周）。因此，如果今天是第 6 周，那么当用户单击下一个或上一个时，日历仅显示第 1 周到第 12 周的日期。我查看了修改 fullcalendar.js，但没有时间绕开我的项目时间表去做。因此，作为一种解决方法，这是我所做的：

1. 在页面左侧的 div 中添加一个日期选择器，而 fullCalendar 在右侧。
2. 为您的计划日期范围设置 startDate 和 endDate。
3. 在 datepicker 中使用 startDate 和 endDate 为 datepicker 中的程序日期范围设置 minDate 和 maxDate 变量，以灰显范围之外的所有其他日期。这样做的目的是提示用户留在范围内。另外，我添加了一些代码，以便当用户点击 datepicker 中的日期时，日期会显示在 fullCalendar 中。

4. 在您的自定义 jQuery 文件 .js 中，将日期作为变量的 dayClick 添加到 fullCalendar 方法：

   if (+date jQuery.endDate) {

   var $date_out_of_range_dialog = jQuery('') .html('

   抱歉，您选择的日期超出了当前节目的日期范围。

   开始日期： '+ (jQuery.startDate.getMonth() + 1) + '/' +jQuery.startDate.getDate() + '/' +jQuery.startDate.getFullYear() +'

   结束日期： ' + (jQuery.endDate.getMonth() + 1) + '/' +jQuery.endDate.getDate() + '/' +jQuery.endDate.getFullYear() + '

   ') 。对话（{ 自动打开：假， 模态：真， 标题：'日期超出范围'， 宽度：600， 纽扣： { “好的”：函数（）{ jQuery(this).dialog("close"); } } })

   $date_out_of_range_dialog.dialog('open');

   } 否则 {

   //在范围内执行其他操作，例如查看/添加/删除当天的事件。

   }

5. 打开对话窗口的 .dialog 方法来自 mootools，但在 jQuery 中也可以使用类似的方法。我在前面加上了 jQuery。 startDate 和 endDate 以便可以通过我的 .js 文件使用变量。

6. 这是日期选择器选择日期并在 fullCalendar 上选择的代码：

   jQuery('#datepicker_for_calendar').datepicker({ 默认日期：jQuery.startDate， minDate：jQuery.startDate， 最大日期：jQuery.endDate， 内联：真， 显示按钮面板：真， onSelect：函数（dateText，inst）{ var d = 新日期（日期文本）； jQuery('#calendar').fullCalendar('gotoDate', d); 选定日期 = d; } });

Answer 8

轮到我添加调整了。然而，这是基于 lewsid 的 answer 的，其中包括必要的日期数学和完整日历选择器来实现它，但有一个转折。

我刚刚添加了两个 if，您可以选择使用一个或两个，或者不使用。 它们的目的是特定日期，因为您允许例如“2 个月”来回，如果您在一周查看“今天”+ 2 个月可能会被禁用，而且，在您前进之后可能会被阻止返回“今天”。

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 2); //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();
      // TWEAK: Day Specific Vars
      var cal_date_month_day = parseInt(view.start.getDate());
      var cur_date_month_day = parseInt(now.getDate());

      // TWEAK: Only Disable if I can see today!
      if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
      // TWEAK: Only Disable if I really did reach "Today" + months
      if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 9

我非常喜欢 lewsid 的回答，但它有一些问题。首先，view.start 是一个 Moment，而不是一个日期，所以 getMonth() 不存在。其次，视图的start 只是该月的第一个可见日期，这意味着该日期可以来自上个月。要避免这种情况，请使用其intervalStart 属性。

这是我让日历列出当前年份的实现。

viewRender: function(view, element) {
    var now = new Date(new Date().getFullYear(), 0, 1);
    var end = new Date(new Date().getFullYear(), 11, 31);

    var calDateString = view.intervalStart.month()+'/'+view.intervalStart.year();
    var curDateString = now.getMonth()+'/'+now.getFullYear();
    var endDateString = end.getMonth()+'/'+end.getFullYear();

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

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