New to Telerik UI for Blazor? Download Free 30-day trial

Calendar - Disabled Dates

You will not be able to book an event hall for the dates between April 10th 2020 and April 12th 2020 (Easter Day). You can select multiple dates.
29 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
  • Disabled-dates.razor
Loading the demo source code...please wait.


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.

This Calendar Disabled Dates example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.