Edit this page

Disable Months in the Kendo UI Calendar Year View

Environment

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

Description

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.

Solution

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.

Example:
<div id="monthpicker"></div>
<script>
   function disableDates(calendar){
     calendar.element.find("tr:last-child td")
       .addClass("k-state-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>      
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy