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. The current month is May 2010, I would only like the calendar to show May and Apr (on clicking of previous month), and Jun (on clicking on next month), the rest of the months would be deselected from user selection.

I am not sure if I missed reading any part on the fullcalendar documentation. Kindly advise. Thank you.

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

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 3

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 4

My turn to add a tweak. This however is based on lewsid's answer that includes the necessary date math and fullcalendar selectors to pull it off, but with a twist.

I just added two if's, which you can opt to use one or both, or none. The purpose of them is to be day specific, just because you allow for example, "2 months" forth and back, if you are on a weekView the "Today" + 2 months might be disabled, and also, after you go forward you might be blocked of coming back to "Today".

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 2); //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();
      // TWEAK: Day Specific Vars
      var cal_date_month_day = parseInt(view.start.getDate());
      var cur_date_month_day = parseInt(now.getDate());

      // TWEAK: Only Disable if I can see today!
      if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
      // TWEAK: Only Disable if I really did reach "Today" + months
      if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 5

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

                if (view.start < academicYearStartDate) {
                    $("#SchoolCalender .fc-button-prev").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-prev").show();
                }

            }

Answer 6

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

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

Answer 8

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 9

I haven't done this, so I'm not sure this will work. But you could at least try and see.

I would probably look at customizing the viewDisplay callback. It receives a View Object that contains a start property, among others. You could use the View object properties to test what view and date the user is looking at and then perform actions based on it.

I'm not sure if fullcalendar works this way, but some plugins will abort an action if you return false from a callback. So you could check the start date and if it is out of your range of acceptable months, then return false to abort the action.

If that doesn't work, inside of viewDisplay you could again check the start date. If the next month or previous month are out of range, then you could use jQuery selectors to grab the prev/next buttons and disable them. That way the user wouldn't be able to switch to an out of range month.

Also, if the user is in an out-of-range month, you could immediate issue a gotoDate command to switch to a valid month.

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

There are many ways to do the logic and date math in there, but I think you could get something working this way.