Disable Months in the Kendo UI Calendar Year View


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


Is there any way to disable the months in the calendar for the year. My min and max dates are from 1st January 2017 to 31st August 2017. My requirement is to show the months from September 2017 - December 2017 but in the disabled state.


At present, the Kendo UI Calendar does not have a year template, so to disable the dates, we need to select the cells from the generated table and add the k-state-disabled class to them and prevent the selection. We can stop the click from propagating and triggering change with the e.stopImmediatePropagation() method.

The Kendo UI Calendar has a navigate event which is suitable to implement 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
Not finding the help you need? Improve this article