jQuery 如何在某个日期之后阻止 Fullcalendar 中的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19670748/
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
How to block out dates in the Fullcalendar beyond a certain date
提问by user unknown
I have a date in the future which is always 30 days ahead of the current date. It's stored in a Date object. I worked this out using:
我有一个未来的日期，它总是比当前日期早 30 天。它存储在一个 Date 对象中。我使用以下方法解决了这个问题：
var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);
Using the FullCalendar jQuery pluginI want to visually block out any days past this date on the calendar with a different background colour so a user knows they can't click on them or create an event on those days.
使用FullCalendar jQuery 插件，我想用不同的背景颜色在日历上直观地屏蔽此日期之后的任何日子，以便用户知道他们无法在这些日子点击它们或创建事件。
What is the best way to do this with the FullCalendar? Maybe disable all dates by default, and only enable for a specific range (from today's date through to 30 days in the future)?
使用 FullCalendar 执行此操作的最佳方法是什么？也许默认禁用所有日期，只启用特定范围（从今天的日期到未来 30 天）？
I think I can apply a disabled background state to all the cells using the following code:
我想我可以使用以下代码将禁用的背景状态应用于所有单元格：
$(".fc-widget-content").addClass("disabled");
.disabled .fc-day-content {
background-color: #123959;
color: #FFFFFF;
cursor: default;
}
How can it be done?
怎么做到呢？
回答by LeGEC
Use the dayRenderoption to add a "disabled" class to out of range dates.
使用dayRender选项将“禁用”类添加到超出范围的日期。
$('#calendar').fullCalendar({
...
dayRender: function(date, cell){
if (date > maxDate){
$(cell).addClass('disabled');
}
}
...
});
You can also use the viewRenderevent and the gotoDatemethod, to prevent users to navigate farther than 30 days after today :
您还可以使用viewRender事件和gotoDate方法来防止用户在今天之后导航超过 30 天：
$('#calendar').fullCalendar({
...
viewRender: function(view){
if (view.start > maxDate){
$('#calendar').fullCalendar('gotoDate', maxDate);
}
}
...
});
回答by dezman
dayClick: function(date, allDay, jsEvent, view) {
var myDate = new Date();
//How many days to add from today?
var daysToAdd = 15;
myDate.setDate(myDate.getDate() + daysToAdd);
if (date < myDate) {
//TRUE Clicked date smaller than today + daysToadd
alert("You cannot book on this day!");
} else {
//FLASE Clicked date larger than today + daysToadd
alert("Excellent choice! We can book today..");
}
}
回答by CIRCLE
For someone who is looking for a solution to define a min-display-dateand max-display-date: (for fullcalendar v2)
对于正在寻找定义 amin-display-date和max-display-date:（对于 fullcalendar v2）的解决方案的人
$('#calendar').fullCalendar({
defaultDate: new Date(),
viewRender: function(view, element) {
curdate = new Date();
viewdate = new Date(view.start);
// PREV - force minimum display month to current month
if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <=
new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
$('.fc-prev-button').prop('disabled', true);
$('.fc-prev-button').css('opacity', 0.5);
} else {
$('.fc-prev-button').prop('disabled', false);
$('.fc-prev-button').css('opacity', 1);
}
// NEXT - force max display month to a year from current month
if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >=
new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
$('.fc-next-button').prop('disabled', true);
$('.fc-next-button').css('opacity', 0.5);
} else {
$('.fc-next-button').prop('disabled', false);
$('.fc-next-button').css('opacity', 1);
}
}
});
回答by Gio Valle
this one chose the current month period
这个选择了当月期间
<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
defaultDate: moment(),
editable: false,
//height:'auto',
//weekends: false,
defaultView: 'agendaWeek',
eventLimit: true,
events: {
url: 'php/get-events.php',
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
viewRender: function(view,element) {
var now = new Date();
var end = new Date();
end.setMonth(now.getMonth());
end.setDate(<?php echo $numerodias; ?>);
now.setDate(1);
if ( end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
alert(end);
}
else {
$("#calendar .fc-next-button").show();
}
if ( view.start < now) {
$("#calendar .fc-prev-button").hide();
return false;
}
else {
$("#calendar .fc-prev-button").show();
}
}
});
});
回答by Wajid khan
Simply add this code in Fullcalendar:
只需在 Fullcalendar 中添加此代码：
select: function (start, end, jsEvent, view) {
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
else {
var currentDate = moment(start).format('YYYY/MM/DD'));
alert(currentDate);
}
}
Simple and fast. Enjoy!
简单快速。享受！
回答by altore
for disable cell on click (version 2.0) :
单击时禁用单元格（2.0 版）：
dayRender: function( date, cell ) {
// It's an example, do your own test here
if(cell.hasClass("fc-other-month")) {
cell.addClass('disabled');
}
},
dayClick: function(date, jsEvent, view) {
if($(jsEvent.target).hasClass("disabled")){
return false;
}
// Your code
// ....
}
