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 returnstrue. - 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.
Using a Date Array
The following example demonstrates how to provide an array of dates to disable the listed dates.
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>
`
})
export class AppComponent {
public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}Preventing Invalid Input
The MultiViewCalendar selected range can include disabled dates. To notify users that their input is invalid, use the built-in forms validation for disabled dates. By default, forms validation is disabled. To enable it, set the disabledDatesRangeValidation property to true.