jQuery Fullcalendar 限制可用月份的显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2927744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar limit the display of available months?
提问by jl.
I would like to find out how can I limit the fullcalendar to show a three months period and deselectable for the rest of the months like within a datepicker?
我想知道如何将完整日历限制为显示三个月的时间，并且可以像在日期选择器中一样在剩余的月份中取消选择？
E.g. The current month is May 2010, I would only like the calendar to show May and Apr (on clicking of previous month), and Jun (on clicking on next month), the rest of the months would be deselected from user selection.
例如，当前月份是 2010 年 5 月，我只希望日历显示五月和四月（点击上个月）和六月（点击下个月），其余月份将从用户选择中取消。
I am not sure if I missed reading any part on the fullcalendar documentation. Kindly advise. Thank you.
我不确定我是否错过了 fullcalendar 文档中的任何部分。好心提醒。谢谢你。
回答by Foton
For FullCalendar in version 2 change viewDisplay : function(view) {to
viewRender: function(view,element) {(mixed solution from examples at this page):
对于版本 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();
}
}
});
回答by lewsid
This is based on tauren's answer, but includes the necessary date math and fullcalendar selectors to pull it off (this code uses a range of 12 months):
这是基于牛头人的答案，但包括了必要的日期数学和fullcalendar选择把它关闭（此代码使用范围为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"); }
}
});
回答by Tauren
I haven't done this, so I'm not sure this will work. But you could at least try and see.
我没有这样做过，所以我不确定这会起作用。但你至少可以试试看。
I would probably look at customizing the viewDisplaycallback. It receives a View Objectthat contains a startproperty, among others. You could use the View object properties to test what view and date the user is looking at and then perform actions based on it.
我可能会考虑自定义viewDisplay回调。它接收一个包含属性等的视图对象start。您可以使用 View 对象属性来测试用户正在查看的视图和日期，然后根据它执行操作。
I'm not sure if fullcalendar works this way, but some plugins will abort an action if you return falsefrom a callback. So you could check the startdate and if it is out of your range of acceptable months, then return falseto abort the action.
我不确定 fullcalendar 是否以这种方式工作，但是如果您return false从回调中止某些插件会中止操作。因此，您可以检查start日期，如果它超出您可接受的月份范围，则return false中止操作。
If that doesn't work, inside of viewDisplayyou could again check the startdate. If the next month or previous month are out of range, then you could use jQuery selectors to grab the prev/next buttons and disable them. That way the user wouldn't be able to switch to an out of range month.
如果这不起作用，viewDisplay您可以再次检查start日期。如果下个月或上个月超出范围，那么您可以使用 jQuery 选择器来获取上一个/下一个按钮并禁用它们。这样用户就无法切换到超出范围的月份。
Also, if the user is in an out-of-range month, you could immediate issue a gotoDatecommand to switch to a valid month.
此外，如果用户处于超出范围的月份，您可以立即发出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
}
}
});
There are many ways to do the logic and date math in there, but I think you could get something working this way.
有很多方法可以在其中进行逻辑和日期数学运算，但我认为您可以通过这种方式进行操作。
回答by Binary
you can use the option
您可以使用该选项
$('#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'
});
回答by Prasad19sara
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();
}
}
回答by Joel Correa
$('#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"); }
}
回答by netefficacy
I was facing a similar situation: I have a program of events and wanted to limit the Fullcalendar to the date range for the events (e.g., 12 weeks). So, if today is in week 6, then the calendar only displays the dates from week 1 to 12 when the user clicks next or previous. I looked at modifying fullcalendar.js but do not have time to detour from my project timeline to do so. So as a workaround here is what I did:
我面临着类似的情况：我有一个事件计划，并希望将 Fullcalendar 限制为事件的日期范围（例如，12 周）。因此，如果今天是在第 6 周，那么当用户单击下一个或上一个时，日历只会显示从第 1 周到第 12 周的日期。我看着修改 fullcalendar.js 但没有时间绕过我的项目时间表来这样做。因此，作为一种解决方法，我是这样做的：
- Add a datepicker in a div to the left side of page, with the fullCalendar on right.
- Set a startDate and endDate for your program date range.
- Set the minDate and maxDate vars in datepicker using startDate and endDate for the program date range in datepicker, to grey out all other dates outside of the range. The purpose of this is to hint to the user to stay in the range. Also, I added some code so that when a user clicks on the date in datepicker, the day is displayed in fullCalendar.
In your custom jQuery file .js, add to the fullCalendar method for dayClickwhich takes date as variable:
if (+date < +jQuery.startDate || +date > jQuery.endDate) {
var $date_out_of_range_dialog = jQuery('') .html('
Sorry, the date you selected is outside the date range for the current program.
Start Date:'+ (jQuery.startDate.getMonth() + 1) + '/' +jQuery.startDate.getDate() + '/' +jQuery.startDate.getFullYear() +'
End Date:' + (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('open');
} else {
//do something else like view/add/delete event for that day in range.
}
The .dialog method to open the dialog window is from mootools, but something similar can be used in jQuery. I prepended jQuery. to startDate and endDate so that the vars were available throught my .js file.
Here is the code for the datepicker to pick date and select on 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; } });
- 在页面左侧的 div 中添加日期选择器，右侧是 fullCalendar。
- 为您的计划日期范围设置 startDate 和 endDate。
- 使用 startDate 和 endDate 为 datepicker 中的程序日期范围设置 datepicker 中的 minDate 和 maxDate 变量，以使范围之外的所有其他日期变灰。这样做的目的是提示用户留在范围内。此外，我添加了一些代码，以便当用户单击 datepicker 中的日期时，该日期会显示在 fullCalendar 中。
在您的自定义的jQuery文件的.js，添加到fullCalendar方法dayClick这需要日期变量：
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('open');
} 别的 {
//在范围内为当天执行其他操作，例如查看/添加/删除事件。
}
打开对话框窗口的 .dialog 方法来自 mootools，但在 jQuery 中可以使用类似的方法。我预先添加了 jQuery。到 startDate 和 endDate 以便通过我的 .js 文件可以使用变量。
这是日期选择器选择日期并在 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; } });
回答by André Catita
My turn to add a tweak. This however is based on lewsid's answerthat includes the necessary date math and fullcalendar selectors to pull it off, but with a twist.
轮到我添加一个调整。然而，这是基于lewsid的答案，其中包括必要的日期数学和全日历选择器来实现它，但有一点不同。
I just added two if's, which you can opt to use one or both, or none. The purpose of them is to be day specific, just because you allow for example, "2 months" forth and back, if you are on a weekView the "Today" + 2 months might be disabled, and also, after you go forward you might be blocked of coming back to "Today".
我刚刚添加了两个 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"); }
}
});
回答by Mildan
I liked lewsid's answer a lot but it has some issues. First of all, the view.start is a Moment, not a date, so getMonth()does not exist. Secondly, a View's startis just the first visible day in that month, meaning that date can be from the previous month. To circumvent this, use its intervalStartproperty.
我非常喜欢 lewsid 的回答，但它有一些问题。首先， view.start 是一个时刻，而不是日期，所以getMonth()不存在。其次，视图start只是该月的第一个可见日期，这意味着该日期可以是上个月。要避免这种情况，请使用其intervalStart属性。
Here is my implementation to get the calendar to list the current year.
这是我让日历列出当前年份的实现。
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");
}
}
