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 liked lewsid's answer a lot but it has some issues. First of all, the view.start is a Moment, not a date, so getMonth() does not exist. Secondly, a View's start is just the first visible day in that month, meaning that date can be from the previous month. To circumvent this, use its intervalStart property.

Here is my implementation to get the calendar to list the current year.

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");
    }
}

Answer 2

For FullCalendar in version 2 change viewDisplay : function(view) { to viewRender: function(view,element) { (mixed solution from examples at this page):

  $('#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();
            }
        }
  });

Answer 3

you can use the option

$('#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'
            });

Answer 4

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

Answer 5

 $('#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"); }
            }

Answer 6

This is based on tauren's answer, but includes the necessary date math and fullcalendar selectors to pull it off (this code uses a range of 12 months):

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"); }
    }
});