FullCalendar - how to disable prev button

Question

How do you disable the prev button when the previous month is less than the current month?

For instance, if the current month is August, then I want to disable the prev month button so that you cannot see the month of July.

Answer 1

The code checks for fc-state-disabled or ui-state-disabled so there is no need to disbled the button.

viewRender: function( view, element ) {
    // Drop the second param ('day') if you want to be more specific
    if(moment().isAfter(view.intervalStart, 'day')) {
        $('.fc-prev-button').addClass('fc-state-disabled');
    } else {
        $('.fc-prev-button').removeClass('fc-state-disabled');
    }
}

Answer 2

You can do this easily by yourself, here is an example that works.

I have done this by changing fullcalendar.js. Note that in many examples you can change the year, month and day using the prev/next buttons. Each of these have their own render function so this would need to be taken in to consideration if you want it for each of these. My example can easily be adapted.

In my example I also set the previous button to the color red when it is "disabled". You can decide yourself on how you want to do with this.

views.month = function(element, options, viewName) {
    return new Grid(element, options, {
        render: function(date, delta) {
            if (delta == -1) {
                var curr_date = new Date();
                var curr_m = curr_date.getMonth();
                if (date.getMonth() < curr_m) {
                    return false;
                } else if ((date.getMonth() - 1) < curr_m) {
                    $(".fc-button-prev span").css("background", "red");
                } else {
                    $(".fc-button-prev span").css("background", "#E8E8E8");
                }               
            } else {
                $(".fc-button-prev span").css("background", "#E8E8E8");
            }

This starts from line :944 in fullcalendar.js

I have tested this in Firefox 3.6.8 using the examples basic-view.html and default.html provided when you download FullCalendar. Simply change:

<script type='text/javascript' src='../fullcalendar.min.js'></script>

to

<script type='text/javascript' src='../fullcalendar.js'></script>