Disable previous month navigation in FullCalendar.

Adam Shaw’s FullCalendar is a wonderful plugin if you need to display a calendar on your site.

My only problem was that I needed to find out how to disable navigation to previous months. None of my projects show historical data.

Searching for a way to do this did not find any results but did find some other people wanting to know how. I knew the code to use but not where to put it.

After some investigation I found the correct function and successfully disabled the previous button if you were on the current month.

Open fullcalendar.js and place this code in the renderView function (around line 368 in version 1.5.4)) before  ignoreWindowResize–; near the end of the function.

7 comments

  1. Better is to do sth like this in the calendar config section’s viewRender event:

    viewRender: function( view, element ) {
    var globalStartDate = moment(‘2014-05-02′);
    var globalEndDate = moment(‘2014-05-20′);

    var currentStart = view.start;
    var currentEnd = view.end;

    var prevSelector = ‘table.fc-header span.fc-button-prev';
    if (moment(currentStart) globalEndDate.subtract(‘minutes’, ‘1’)) {
    $(nextSelector).addClass(‘fc-state-disabled’);
    } else {
    $(nextSelector).removeClass(‘fc-state-disabled’);
    }
    }

    1. Thanks for the alternative.

      It has been a while since I’ve used FullCalender for anything, I’ve moved more towards grids and lists for displaying events.

      If I ever have the need to use it again I’ll give your code a try.

    2. the correct code (tested) to prevent navigation before now

      viewRender: function( view, element ) {

      var prevButton = $(‘table.fc-header span.fc-button-prev’);

      if ( moment().isAfter(view.start) ) {
      prevButton.addClass(‘fc-state-disabled’);
      } else {
      prevButton.removeClass(‘fc-state-disabled’);
      }

      }

    3. Sorry your code is not working for full calendar v2.1

      getting error

      SyntaxError: missing ) after condition

      if (moment(currentStart) globalEndDate.subtract(‘minutes’, ‘1’)) {
      Kindly suggest solution

      1. The error about a missing ) wouldn’t be caused by my code itself. You might have overridden a ) somewhere when implementing my code.

        1. I have used this code.
          KIndly check and suggest any error


          viewRender: function( view, element ) {
          var globalStartDate = moment(‘2014-10-12′);
          var globalEndDate = moment(‘2014-11-20′);

          var currentStart = view.start;
          var currentEnd = view.end;

          var prevSelector = ‘table.fc-header span.fc-button-prev';
          if (moment(currentStart) globalEndDate.subtract(‘minutes’, ‘1’)) {
          $(nextSelector).addClass(‘fc-state-disabled’);
          } else {
          $(nextSelector).removeClass(‘fc-state-disabled’);
          }
          },

Leave a Reply to Christopher Cancel reply