Show Opacity for Disabled Months in DatePicker

Environment

Description

How to show an opacity for a disabled month in a DatePicker's Year View?

Solution

1. Use the built-in disabledDates callback of the DatePicker component and disable the desired month in the handler.

   Copy Code<kendo-datepicker
       ...
       [disabledDates]="isDateDisabled"
   >...</kendo-datepicker>

   Copy Codepublic isDateDisabled(date: Date): boolean {
       return date.getMonth() === 5;
   }

2. Inside the DatePicker component, use the built-in YearCellTemplateDirective. Inside the template, apply the k-disabled class to the disabled month in order to change the opacity.

   Copy Code<ng-template kendoCalendarYearCellTemplate let-context="cellContext">
       <span [class.k-disabled]="isDateDisabled(context.value)">
           {{context.formattedValue}}
       </span>
   </ng-template>

The following example shows the full implementation of the described approach.