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

Calendar - Selection

Configurator

Selection Mode

Single Selection

Select a date by clicking on it - you can choose only one.

Su Mo Tu We Th Fr Sa
30 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 31 1 2 3
4 5 6 7 8 9 10
Selected Date
  • Selection.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

Telerik UI for Blazor Calendar allows you to select dates and exposes an option to configure the selection mode. The selection mode of the Calendar controls how many dates the user will be able to select. To specify the desired mode, use the SelectionMode property. It takes a member of the Telerik.Blazor.CalendarSelectionMode enum. The available options are:

  • Single Selection Mode (the default)
  • Multiple Selection Mode
  • Range Selection Mode

If the Single Selection Mode is enabled, the user will be able to select only one date. This option is useful if you want to restrict the user selection to a single value and the desired output of the Blazor Calendar is just one DateTime instance.

The Multiple Selection Mode allows the user to select multiple random dates. In this case, you can use the SelectedDates property of the Blazor Calendar to get or set the selected dates collection. It accepts a List of DateTime objects and supports two-way binding.

When the Range Selection Mode is enabled, the user can select a range of dates. In this case, the RangeStart property of the Blazor Calendar gets and sets the first date of the selection and the RangeEnd property gets and sets the last date of the selection. Both parameters support two-way binding. When the Range Selection Mode is enabled, you can use the AllowReverse property. If the reverse range is enabled, the range will be marked even if the last date of the selection precedes the first date of the selection.

The current demo toggles four Blazor Calendar instances, one for each of the available selection modes and one for Range Selection Mode with reverse range. Make a selection in the different modes to explore the Calendar behavior.

With Multiple Selection enabled, the dates can be selected by holding down the Shift or Ctrl keys when clicking them.

With Range Selection enabled, clicking on a date will mark it as a range start. Clicking on another date after the start will mark it as a range end.

This Blazor Calendar Selection 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.