Blazor Calendar Example - Multi Selection
July 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 28 | 29 | 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 |
Properties
This sample demonstrates the Calendar component’s multiple date selection capability. Click desired dates in the calendar to add them to the component’s Values collection; each selected date is highlighted in the UI so users can quickly review chosen entries.
Enable multi-date selection by setting the IsMultiSelection property to true and bind the component’s selection to the Values collection. The Values collection contains the selected date instances and can be read or initialized from code to reflect persisted or default choices.
Interaction is direct and intuitive: selecting a date adds it to Values and highlights it in the calendar; deselecting a date removes it from Values. The example preselects the dates 10, 15, and 25 to illustrate how multiple selections appear and how the Values collection is populated at initialization.
Use this pattern when an application requires users to choose multiple noncontiguous dates—for example, booking recurring appointments, marking important events, or collecting availability. Bind Values to a backing model or state container to persist selections, and update the collection programmatically when initializing or restoring user data.
See also: