Components / Date Inputs / MultiViewCalendar

Disabled Dates

The MultiViewCalendar allows you to disable the selection of specified dates by providing a disabledDates value to the component.

The MultiViewCalendar supports the following approaches for disabling dates:

  • Using a function—The format for this input is (date: Date) => boolean. The approach disables each date for which the provided function returns true.
  • Using an array of dates—The format for this input is Date[]. The approach disables only the dates that are explicitly listed.
  • Using an array of days—The format for this input is Day[]. The approach disables the specified days of the week.

Using a Function

The following example demonstrates how to provide a function to disable every even date in the MultiViewCalendar.

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiviewcalendar
      [disabledDates]="disabledDates"
    >
    </kendo-multiviewcalendar>
  `
})
class AppComponent {
  public disabledDates = (date: Date): boolean => {
    return date.getDate() % 2 === 0;
  }
}

Using a Date Array

The following example demonstrates how to provide an array of dates to disable the listed dates.

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiviewcalendar
      [value]="value"
      [disabledDates]="disabledDates"
    >
    </kendo-multiviewcalendar>
  `
})
class AppComponent {
  public value: Date = new Date(2019, 5, 5);

  public disabledDates: Date[] = [
    new Date(2019, 5, 1),
    new Date(2019, 5, 2),
    new Date(2019, 5, 3),
    new Date(2019, 5, 4),
    new Date(2019, 5, 9),
    new Date(2019, 5, 12),
    new Date(2019, 5, 22)
  ];
}

Using a Day Array

The following example demonstrates how to provide an array of Day enum values to disable the listed days of the week, that is, the days of the weekend.

import { Day } from '@progress/kendo-date-math';

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiviewcalendar
      [disabledDates]="disabledDates"
    >
    </kendo-multiviewcalendar>
  `
})
class AppComponent {
  public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}

Validation

The MultiViewCalendar selected range can include disabled dates. To notify users that their input is invalid, you can use the built-in forms validation for disabled dates. By default, forms validation is disabled. To enable it, set the disabledDatesRangeValidation property to true.

import { Day } from '@progress/kendo-date-math';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <strong>Range: {{range | json}} | Errors: {{model.errors | json}}</strong>
      <hr />
      <input type="checkbox" id="disabled-dates-range-validation" class="k-checkbox" [(ngModel)]="disabledDatesRangeValidation" />
      <label class="k-checkbox-label" for="disabled-dates-range-validation">Disabled Dates Range Validation</label>
    </div>

    <kendo-multiviewcalendar
      #model="ngModel"
      kendoDateRangeSelection
      [(ngModel)]="value"
      [(selectionRange)]="range"
      [disabledDates]="disabledDates"
      [disabledDatesRangeValidation]="disabledDatesRangeValidation"
    >
    </kendo-multiviewcalendar>
  `,
  styles: [`
    .ng-invalid {
      border: 1px solid red;
    }
  `]
})
class AppComponent {
  public value: Date;
  public range: SelectionRange = { start: new Date(2019, 9, 16), end: new Date(2019, 9, 23) };
  public disabledDatesRangeValidation: boolean = true;
  public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}

In this article