How to block out dates in the Fullcalendar beyond a certain date
How about this solution?
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..");
}
}
In new version V4 of Full Calendar, there are lot of updates and you can find the settings for your need
Limits which dates the user can navigate to and where events can go.
// constrain to a discrete range
var calendar = new Calendar(calendarEl, {
defaultView: 'dayGridMonth',
validRange: {
start: '2017-05-01',
end: '2017-06-01'
}
});
// constrain to an open-ended range
var calendar = new Calendar(calendarEl, {
defaultView: 'dayGridMonth',
validRange: {
start: '2017-05-01'
}
});
Use the dayRender option to add a "disabled" class to out of range dates.
$('#calendar').fullCalendar({
...
dayRender: function(date, cell){
if (date > maxDate){
$(cell).addClass('disabled');
}
}
...
});
You can also use the viewRender event and the gotoDate method, to prevent users to navigate farther than 30 days after today :
$('#calendar').fullCalendar({
...
viewRender: function(view){
if (view.start > maxDate){
$('#calendar').fullCalendar('gotoDate', maxDate);
}
}
...
});