Fullcalendar limit the display of available months?

Question

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. T

Answer 1

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:

1. Add a datepicker in a div to the left side of page, with the fullCalendar on right.
2. Set a startDate and endDate for your program date range.
3. 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.

4. In your custom jQuery file .js, add to the fullCalendar method for dayClick which 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.

   }

5. 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.

6. 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; } });