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

Calendar - Selection

EXAMPLE
VIEW SOURCE
EDIT IN THEME BUILDER
Change Theme
Default

Single Selection

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

Su	Mo	Tu	We	Th	Fr	Sa
	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

Selected Date

Multiple Selection

Select several dates by holding down the Shift or Ctrl keys when clicking on it.

Su	Mo	Tu	We	Th	Fr	Sa
		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

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.

Today

Su	Mo	Tu	We	Th	Fr	Sa
		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

Su	Mo	Tu	We	Th	Fr	Sa
				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

Selected Range

Range Start: 01 Apr 2019

Range End: 10 Apr 2019

Selection.razor
Loading the demo source code...please wait.

Support & Learning Resources

Calendar Selection - Documentation

Was this article helpful?

Yes No