New to Telerik UI for Blazor? Download Free 30-day trial
Calendar - Disabled Dates
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
- Disabled-dates.razor
Description
Telerik UI for Blazor Calendar allows you to mark some days as disabled. This functionality is useful when you want to prevent the user from selecting certain dates. To mark the dates as disabled, you just need to add them to the DisabledDates collection – it accepts a List of DateTime objects. The disabled cells in the Calendar will be decorated with ”k-disabled” class – they will have less opacity and no pointer events to clearly indicate that the users will not be able to select them.
The Disabled Dates functionality can be used along with all supported selection modes – single, multiple and range. With Single and Multiple selection, the user can't select the disabled dates. With Range selection, the disabled dates cannot be the start or end of a range. They can be included in the range but will not actually be selected.
The demo showcases a Blazor Calendar with Multiple selection. The dates between April 10th 2020 and April 12th 2020 are disabled and cannot be selected. Try selecting one allowed day to see a success message. Try selecting a range of dates including the disabled dates to see an error message.