我想知道如何限制完整日历以显示三个月的时间段，并且在日期选择器中的其余月份可以取消选择？
例如，当前月份是 2010 年 5 月，我只希望日历显示 May 和 Apr（单击上个月）和 Jun（单击下个月），其余月份将从用户选择中取消选择。
我不确定我是否错过了阅读完整日历文档的任何部分。好心提醒。谢谢你。
问问题
34014 次
9 回答
18
对于版本 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();
}
}
});
于 2014-08-21T15:22:30.110 回答
9
这是基于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"); }
}
});
于 2012-03-12T17:22:24.153 回答
4
我没有这样做，所以我不确定这会奏效。但你至少可以试试看。
我可能会考虑自定义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
}
}
});
有很多方法可以在那里进行逻辑和日期数学，但我认为你可以通过这种方式得到一些工作。
于 2010-05-28T10:21:26.617 回答
3
您可以使用该选项
$('#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'
});
于 2017-05-01T15:14:02.670 回答
2
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();
}
}
于 2013-10-23T07:02:28.390 回答
1
$('#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"); }
}
于 2013-07-25T13:18:47.017 回答
0
轮到我添加调整了。然而，这是基于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"); }
}
});
于 2014-01-21T21:32:27.273 回答
0
我面临着类似的情况：我有一个事件计划，并希望将 Fullcalendar 限制在事件的日期范围内（例如，12 周）。因此，如果今天是第 6 周，那么当用户单击下一个或上一个时，日历只会显示第 1 周到第 12 周的日期。我查看了修改 fullcalendar.js，但没有时间绕开我的项目时间表去做。因此，作为一种解决方法，这是我所做的：
- 在页面左侧的 div 中添加一个日期选择器，右侧为 fullCalendar。
- 为您的计划日期范围设置 startDate 和 endDate。
- 在 datepicker 中使用 startDate 和 endDate 为 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', 宽度: 600, 按钮: { "Ok": function() { jQuery(this).dialog("close"); } } })$date_out_of_range_dialog.dialog('open');
} 别的 {
//在范围内为当天执行其他操作，例如查看/添加/删除事件。
}
打开对话框窗口的 .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; } });
于 2011-01-26T22:25:47.113 回答
0
我非常喜欢 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");
}
}
于 2017-05-10T13:10:19.800 回答