New to Telerik UI for Blazor? Download Free 30-day trial
Calendar - Selection
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
Single Selection
Select a date by clicking on it - you can choose only one.
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
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 | 11 |
Selected Date
Multiple Selection
Select several dates by holding down the Shift
or Ctrl
keys when clicking on it.
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
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 | 11 |
Selected Dates
Range Selection
When you select the first date, it is marked as the start of the range and the Calendar will highlight the range you would choose with the second click.
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
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 | 11 |
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
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 |
Selected Range
- Selection.razor
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.
The current demo showcases three Blazor Calendar instances, one for each of the available selection modes. 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.