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.