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

Answer 4

This is my simple solution.

Place this code in the renderView function (around line 368 in version 1.5.4)) before ignoreWindowResize--; near 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');
}

Answer 5

For those using the FullCalendar.io version 2, you may use the following code

viewRender: function(view) {
	var now = new Date(); 
	var end = new Date();
	end.setMonth(now.getMonth() + 1); 
	
	
	var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
	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-prev-button').addClass("fc-state-disabled"); }
	else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }

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

Answer 6

header:{
  left:   'title',
  center: '',
  right:  'today prev,next'
},

Just remove "prev"... http://fullcalendar.io/docs/display/header/ in your options

Answer 7

If you have looking for a more recent solution (v4-compatible), look for validRange

See documentation : https://fullcalendar.io/docs/validRange

Answer 8

In version v2 simply set the header without the option. Like this for example:

        header: {
            center: "title",
            right: "month,agendaWeek,agendaDay"
        },

Answer 9

$('#calendar').fullCalendar({
    businessHours: {
        start: '10:00', // a start time 
         end: '22:00', // an end time 
         dow: [ 1, 2, 3, 4, 5 ]
         // days of week. an array of zero-based day of week integers (0=Sunday)
    },
    hiddenDays: [ 0, 6 ],
    defaultView: 'agendaWeek',
    viewRender: function(view) { 
        var now = new Date();
        var end = new Date();
        end.setMonth(now.getMonth() + 2); 
        //========= Hide Next/ Prev Buttons based on date range
        if (view.end > end) {
            $("#calendar .fc-next-button").hide();
            return false;
        }
        else {
            $("#calendar .fc-next-button").show();
        }
        if (view.start < now) {
            $("#calendar .fc-prev-button").hide();
            return false;
        }
        else {
            $("#calendar .fc-prev-button").show();
        }   
    }
});