FullCalendar - how to disable the prev button

Question

How to disable the prev button if the previous month is less than the current month?

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

Answer 1

You can do it easily on your own, here is an example that works.

I did 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 them has its own rendering function, so you will need to consider it if you want it for each of them. My example can be easily adapted.

, "". , .

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

: 944 fullcalendar.js

Firefox 3.6.8, basic-view.html default.html, FullCalendar. :

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

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

Answer 2

fc-state-disabled ui-state-disabled, .

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 3

, fullcalendar.js, :

  // 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", "");
    }
  }

1: JQuery, , , .

2: $jQ jQuery.noConflict(), $jQ $.

Answer 4

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

Answer 5

:

    viewRender: function (view,element) {

            if (moment() >= view.start && moment() <= view.end) {
                $(".fc-prev-button").prop('disabled', true); 
                $(".fc-prev-button").addClass('fc-state-disabled'); 
            }
            else {
                $(".fc-prev-button").removeClass('fc-state-disabled'); 
                $(".fc-prev-button").prop('disabled', false); 
            }
        }

Answer 6

I cannot add a comment to my code that SanRyu posted above, but it must be placed in the renderView function (around line 368 in version 1.5.4) before ignoring WindowResize--; closer to the end of the function.

var lammCurrentDate = new Date();
var lammMinDate = new Date( lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0);
if (currentView.start <= lammMinDate){
    header.disableButton('prev');
} else {
    header.enableButton('prev');
}