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.

Solution 1

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>

Solution 2

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

Solution 3

viewDisplay: function getDate(date) {
                var lammCurrentDate = new Date();
                var lammMinDate = new Date(lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0);

                if (date.start <= lammMinDate) {
                    $(".fc-button-prev").css("display", "none");
                }
                else {
                    $(".fc-button-prev").css("display", "inline-block");
                }
            }

Solution 4

For anyone that doesn't want to modify the fullcalendar.js since that could complicate updates:

  // On load
  $jQ(document).ready(function() {
    // initialize calendar first
    updateCalendar();
  }

  // Update the calendar when previous button is pressed
  $jQ('#calendar .fc-button-prev .fc-button-inner').live('click', function(){
    updateCalendar();
  })

  // Update the calendar when next button is pressed
  $jQ('#calendar .fc-button-next .fc-button-inner').live('click', function(){
    updateCalendar();
  })

  // Update the calendar when the today button is pressed
  $jQ('#calendar .fc-button-today .fc-button-inner').live('click', function(){
    updateCalendar();
  })


  function updateCalendar(){
    var dateObj=$jQ('#calendar').fullCalendar('getDate')
    var month=dateObj.getMonth()+1;
    var year=dateObj.getFullYear();
    var today_month=<%= Date.today.month %>
    var today_year=<%= Date.today.year %>

    // Disable prev button for the past
    if (today_year==year && today_month==month){
      $jQ("#calendar .fc-button-prev").css("display", "none");
    }
    else{
      $jQ("#calendar .fc-button-prev").css("display", "");
    }
    // Disable next button for date.now + 1.year
    if (today_year+1==year && today_month-1==month){
      $jQ("#calendar .fc-button-next").css("display", "none");
    }
    else{
      $jQ("#calendar .fc-button-next").css("display", "");
    }
  }

Note 1: I prefer to get the current date from rails instead of Jquery since I prefer to use the server time since my application isn't used worldwide, and I'm not getting the time anyway.

Note 2: I use $jQ for the jQuery.noConflict(), if you don't just search and replace $jQ for $.

Solution 5

For future users FullCalendar v4 has a nifty feature where you can provide a validRange and anything out of this range will grey out the previous/next buttons.

For Eg.,

//For Closed range

var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2019-05-01',
    end: '2020-06-01'
  }
});

// If there is an an open-ended range without end date limits
var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01'
  }
});

So anything beyond the range or before the range will grey out the prev/next buttons and also avoids any action on those days like in the case of week/month views.

Refer this Doc-link for more details

View more solutions