Fullcalendar限制可用月份的显示？
我想知道如何限制fullcalendar显示三个月的时间段，并在其他几个月内取消选择，就像在datepicker中一样？
例如，当前月份是2010年5月，我只希望日历显示5月和4月（点击上个月）和Jun（点击下个月），其余月份将从用户选择中取消选择。
我不确定我是否错过了阅读fullcalendar文档中的任何部分。 好心提醒。 谢谢。
对于版本2中的FullCalendar，更改viewDisplay : function(view) { to 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(); } } });
这是基于牛头人的答案 ，但包括必要的日期数学和全日历选择器以将其拉出（此代码使用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"); } } });
我没有这样做，所以我不确定这会有效。 但你至少可以试试看。
我可能会考虑自定义viewDisplay回调。 它接收包含start属性的View对象等。 您可以使用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 } } });
有很多方法可以在那里进行逻辑和数据计算，但我认为你可以通过这种方式获得一些工作。
你可以使用该选项
$('#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' });
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(); } }
$('#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"); } }
我遇到了类似的情况：我有一个事件计划，并希望将Fullcalendar限制为事件的日期范围（例如，12周）。 因此，如果今天是在第6周，则日历仅显示用户点击下一个或上一个的第1周到第12周的日期。 我看了修改fullcalendar.js但是没有时间绕过我的项目时间线来这样做。 所以这里的解决方法是我做的：
- 将div中的日期选择器添加到页面左侧，右侧显示fullCalendar。
- 为您的计划日期范围设置startDate和endDate。
- 使用startDate和endDate为datepicker中的程序日期范围设置datepicker中的minDate和maxDate变量，以使该范围之外的所有其他日期变灰。 这样做的目的是提示用户留在范围内。 此外，我添加了一些代码，以便当用户点击datepicker中的日期时，该日期显示在fullCalendar中。
-
在您的自定义jQuery文件.js中，添加到dayClick的fullCalendar方法，该方法将日期作为变量：
if（+ date <+ jQuery.startDate || + 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（）+’
‘）。dialog（{autoOpen：false，modal：true，title：’Date Out of Range’，width：600，buttons：{“Ok”：function（）{jQuery（this）.dialog（“close”）; }}）
$ date_out_of_range_dialog.dialog（ ‘开’）;
} else {
//在范围内执行当天查看/添加/删除事件等其他操作。
}
-
打开对话框窗口的.dialog方法来自mootools，但jQuery中可以使用类似的东西。 我在jQuery之前。 startDate和endDate，以便通过我的.js文件提供变量。
-
以下是datepicker选择日期并在fullCalendar上选择的代码：
jQuery（’＃datepicker_for_calendar’）。datepicker（{defaultDate：jQuery.startDate，minDate：jQuery.startDate，maxDate：jQuery.endDate，inline：true，showButtonPanel：true，onSelect：function（dateText，inst）{var d = new Date（dateText）; jQuery（’#calendar’）。fullCalendar（’gotoDate’，d）; selectedDate = d;}}）;
轮到我添加一个调整。 然而，这是基于lewsid的答案 ，其中包括必要的日期数学和全日历选择器来实现它，但有一个扭曲。
我刚刚添加了两个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"); } } });
我很喜欢lewsid的答案，但它有一些问题。 首先，view.start是一个Moment，而不是一个日期，所以getMonth()不存在。 其次，View的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"); } }