New to Kendo UI for Angular? Start a free 30-day trial

Show Opacity for Disabled Months in DatePicker


ProductProgress® Kendo UI for Angular DatePicker


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


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

    public 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.

    <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
        <span [class.k-disabled]="isDateDisabled(context.value)">

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

View Source
Change Theme:

In this article

Not finding the help you need?