Disable Months in the Kendo UI Calendar Year View

Environment

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

Description

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.

Solution

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>
<script>
   function disableDates(calendar){
     calendar.element.find("tr:last-child td")
       .addClass("k-disabled")
       .click(function(e){
       e.stopImmediatePropagation();
     });
   }
   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"){
         disableDates(calendar)
       }
     }
   }).data("kendoCalendar");
</script>