jQuery FullCalendar.js: disable prev/next button for past/future dates

fullCalendarDisablePrevNext.js

$('#calendar').fullCalendar({
 	viewRender: function(currentView){
		var minDate = moment(),
		maxDate = moment().add(2,'weeks');
		// 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); 
		}
		// Future
		if (maxDate >= currentView.start && maxDate <= currentView.end) {
			$(".fc-next-button").prop('disabled', true); 
			$(".fc-next-button").addClass('fc-state-disabled'); 
		} else {
			$(".fc-next-button").removeClass('fc-state-disabled'); 
			$(".fc-next-button").prop('disabled', false); 
		}
	}
});

This saved my time. Thanks bro

Thanks a lot

Thanks for this!

If you have multiple calendar in one html, you might encounter error that this code disable every .fc-prev-button and .fc-prev-button, here is a solution.

$('#calendar').fullCalendar({
    viewRender: function(currentView){
        var minDate = moment();
        var maxDate = moment().add(2,'weeks');
        // Past
        if (minDate >= currentView.start && minDate <= currentView.end) {
            currentView.calendar.header.disableButton('prev');
        } else {
            currentView.calendar.header.enableButton('prev');
        }
        // Future
        if (maxDate >= currentView.start && maxDate <= currentView.end) {
            currentView.calendar.header.disableButton('next');
        } else {
            currentView.calendar.header.enableButton('next');
        }
    }
});

@jkevintu This can be simplified by below syntax.

viewRender: function(currentView){
	console.log(currentView)
	var minDate = moment(),
	maxDate = moment().add(2,'weeks');

	var navigationContainer = currentView.el.parent().prev()
	// Past
	if (minDate >= currentView.start && minDate <= currentView.end) {
		$(".fc-prev-button", navigationContainer).prop('disabled', true);
		$(".fc-prev-button", navigationContainer).addClass('fc-state-disabled'); 
	}
	else {
		$(".fc-prev-button", navigationContainer).removeClass('fc-state-disabled'); 
		$(".fc-prev-button", navigationContainer).prop('disabled', false); 
	}
	// Future
	if (maxDate >= currentView.start && maxDate <= currentView.end) {
		$(".fc-next-button", navigationContainer).prop('disabled', true); 
		$(".fc-next-button", navigationContainer).addClass('fc-state-disabled'); 
	} else {
		$(".fc-next-button", navigationContainer).removeClass('fc-state-disabled'); 
		$(".fc-next-button", navigationContainer).prop('disabled', false); 
	}
}

How about we get rid of these unnecessary conditions ?

viewRender: function(currentView) {
    var minDate = moment();
    var maxDate = moment().add(2, 'weeks');
    var navigationContainer = currentView.el.parent().prev()
    var cantGoBefore = currentView.start <= minDate;
    var cantGoAfter = currentView.end >= maxDate;

    $(".fc-prev-button", navigationContainer).prop('disabled', cantGoBefore);
    $(".fc-prev-button", navigationContainer).toggleClass('fc-state-disabled', cantGoBefore);
    $(".fc-next-button", navigationContainer).prop('disabled', cantGoAfter);
    $(".fc-next-button", navigationContainer).toggleClass('fc-state-disabled', cantGoAfter);
}

Thank you all! This is so helpful. Deeply grateful.

For anyone using the Event Organiser plugin for WordPress, you can register the same script again with a 0 priority on it to replace the plugin version of fullcalendar.min.js with your own. Here's an image of some php to do so, modify for your paths and your situation.

Create a copy of the fullcalendar.js (not the min version) and add the code in Plaristote's example, but not the function part. See the following screen shot on where to add it. Clear your browser cache, test it, use dev tools to do your own trouble shooting. Then you will save that file, make a copy, pack it with a .min or .packed (whatever) and then be sure it's name and path match the php code. Then pack it and adjust the paths and such in the php. For those who are not so hot with code, it might be worth hiring a dev to do this.

ASSETS_URL is a constant that is defined in the functions.php file.
Assumes a child theme.

define( 'CHILD_URL' , get_stylesheet_directory_uri() );
define( 'ASSETS_URL' , CHILD_URL . '/assets/'  );

CHILD_URL is part of Genesis, so don't re add.

Do not go by line numbers. Look and see that in the conditional CurrentView is where you would add the limit to the prev and next button functions.

	/*
	 * Limit Past and Future Navigation
	 * Thread: https://gist.github.com/juanbrujo/c4a0a8d36fc64860f487
	 * Code author: https://gist.github.com/juanbrujo/c4a0a8d36fc64860f487#gistcomment-2168668
	 * Ref: var minDate = moment(); // now
	*/
	var minDate      = moment('2017-12-01'), // nothing past december 17
        maxDate      = moment().add( 1, 'years'),
        parentCont   = currentView.el.parent().prev(),
        cantGoBefore = currentView.start <= minDate,
        cantGoAfter  = currentView.end >= maxDate;

		$( '.fc-prev-button', parentCont ).prop( 'disabled', cantGoBefore );
		$( '.fc-prev-button', parentCont ).toggleClass( 'fc-state-disabled', cantGoBefore );
		$( '.fc-next-button', parentCont ).prop( 'disabled', cantGoAfter );
		$( '.fc-next-button', parentCont ).toggleClass( 'fc-state-disabled', cantGoAfter );
		
		//end limit past and future nav

Nice Job.....
any one is there who let me know how to disable future dates

how can i disable previous button that user not to enter past date?
i'd used this condition,but its not working
if($("#startdatepicker1").datepicker("getDate").getDate() < today)

Thank you, I was in great need of this solution.

Clean and simple solution that worked perfectly from the go. Thanks!

Thanks!

If they need to disappear with the buttons just assign to the Header as follows.

header: {
   left: '',
   center: 'title',
   right: ''
 },

Thanks a lot!