Fullcalendar limit the display of available months?

Question

Hi,

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