how to disable previous month in Full Calendar Plugin

Question

I want to disable previous month button from full calander

Current month is April. When i clicked on previous button then calendar is showing previous March month. should not be happened.

http://jsfiddle.net/6enYL/

$(document).ready(function () {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title'
        },
        selectable: true,
        selectHelper: true,
        editable: true
    });

});

Answer 1

Yep, I've modified your fiddle with lewsid's answer, and it works. http://jsfiddle.net/6enYL/1/

    jQuery('#calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 2

Disable past dates and view starts from today

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    firstDay :moment().weekday(),
    viewRender: function(currentView){
        var minDate = moment();
        // Past
        if (minDate >= currentView.start && minDate <= currentView.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 3

FullCalendar is not like a traditional DatePicker. There is no way to initially setup the start and end dates of what you want to show.

You have to attach to viewRender event and manipulate the calendar with logic of your own. So if the dates are less than what you want you attach a class to that tile of 'disabled' for example. And also disable the previous button your self. You also then have to re-enable the previous button on the next month. Thanks to this kind of API you build your own custom calendar, but it can take time.

FullCalendar is just a calendar. The rest is up to you.

Here is an update based on Prasad19sara answer : http://jsfiddle.net/6enYL/2/

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title'         
    },
    selectable: true,
    selectHelper: true,         
    editable: true,
    viewDisplay: function (view) {
        //========= Hide Next/ Prev Buttons based on date range
        if (view.end > endDate) {
            $("#calendar .fc-button-next").hide();
            return false;
        }
        else {
            $("#calendar .fc-button-next").show();
        }

        if (view.start < startDate) {
            $("#calendar .fc-button-prev").hide();
            return false;
        }
        else {
            $("#calendar .fc-button-prev").show();
        }
    }

});

Please be aware that viewDisplay is deprecated and will no longer be used in V2