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

Answer 2

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 3

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

            }