New to Kendo UI for jQuery? Download free 30-day trial

Disable Months in the Kendo UI Calendar Year View


Product Version 2017.3 1026
Product Progress® Kendo UI® Calendar for jQuery


How can I disable the months in the calendar for the year? My min and max dates are from 1st January 2017 to 31st August 2017 and I'd like to show the months from September 2017 to December 2017 but in the disabled state.


The Kendo UI Calendar does not have a year template. As a result, to disable the dates:

  1. Select the cells from the generated table.
  2. Add the k-disabled class to them to prevent the selection.

You can stop the click from propagating and triggering a change with the e.stopImmediatePropagation() method.

The Calendar exposes a navigate event which is suitable for implementing disabled months in the year view if the users will be allowed to navigate to other views.

<div id="monthpicker"></div>
   function disableDates(calendar){
     calendar.element.find("tr:last-child td")
   var calendar = $("#monthpicker").kendoCalendar({
     start: "year",
     depth: "year",
     min: new Date(2017,0,1),
     max: new Date(2017,11,31),
     format: "MMMM yyyy",
     value: new Date(2017,7,31),
     navigate: function(e){
       var calendar = this;
       if(calendar.view().name === "year"){
In this article