I am trying to integrate jquery full calendar plugin.. And I want to disable the past dates for selection.. So I can select only dates starting from current date. How is it possible? How can I filter the dates and specify a condition. I am new to jquery.
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
FullCalendar is a JavaScript library that seamlessly integrates with such popular JavaScript frameworks as Vue, React, Angular. Thanks to its excellent documentation, one won't have trouble incorporating the library into projects.
Fullcalendar is the most popular Javascript Calendar. It's powerful and lightweight and suitable for just about anything. For more info see the official siteand the Github repository.
FullCalendar provides settings, methods, and callbacks for interacting with and switching the current view. The initial view when the calendar loads. A View object contains information about a calendar view, such as title and date range.
In the select method, you are provided with the selected start and end date, and earlier in the method you got the current date in the date
variable. So just compare them, and if it is less than date
, handle the error.
select: function(start, end, allDay) {
if(start < date)
{
// Do whatever you want here.
alert('Cannot select past dates.');
return;
}
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
Note regarding Brandon's answer, the popup will also appear if you click on the current date. You would need to check if the user clicked on today's date also:
if (start < date && start.getDate() != date.getDate() ) {
alert('Cannot select past dates.');
return;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With