Overview

Sun Mon Tue Wed Thu Fri Sat
14 31 1 2 3 4 5 6
15 7 8 9 10 11 12 13
16 14 15 16 17 18 19 20
17 21 22 23 24 25 26 27
18 28 29 30 1 2 3 4
19 5 6 7 8 9 10 11

The DevExpress Blazor Calendar component allows users to select dates and navigate through months, years, decades, and centuries.

The component supports keyboard navigation. Users can navigate through root UI elements and within the month/year/decade/century view. See the list of supported keyboard shortcuts.

Multiple Selection

Sun Mon Tue Wed Thu Fri Sat
14 31 1 2 3 4 5 6
15 7 8 9 10 11 12 13
16 14 15 16 17 18 19 20
17 21 22 23 24 25 26 27
18 28 29 30 1 2 3 4
19 5 6 7 8 9 10 11

The Calendar component allows users to select multiple dates: individual dates, date ranges, or a combination of both.

Set the EnableMultiSelect property to true to enable multiple date selection. The SelectedDates collection stores selected dates. To handle selection changes, use the SelectedDatesChanged event.

Users can select dates using the mouse or keyboard.

To add dates to a selection, select the dates while pressing the Ctrl key.

To select a range of dates, select the initial date, press the Shift key, and select the last date.

Date Range

Sun Mon Tue Wed Thu Fri Sat
14 31 1 2 3 4 5 6
15 7 8 9 10 11 12 13
16 14 15 16 17 18 19 20
17 21 22 23 24 25 26 27
18 28 29 30 1 2 3 4
19 5 6 7 8 9 10 11

Use the MinDate and MaxDate properties to specify a range of available dates. The calendar disables dates that are out of the range and hides navigation arrows for them.

In this demo, the Calendar component allows users to select dates from the current year.

Disabled Dates

Sun Mon Tue Wed Thu Fri Sat
14 31 1 2 3 4 5 6
15 7 8 9 10 11 12 13
16 14 15 16 17 18 19 20
17 21 22 23 24 25 26 27
18 28 29 30 1 2 3 4
19 5 6 7 8 9 10 11

In this demo module, a few Calendar dates are grayed out (disabled) and cannot be selected. The CustomDisabledDate event allows you to disable selection of specific dates based on custom logic.

Day Cell Customization

Sun Mon Tue Wed Thu Fri Sat
14 31 1 2 3 4 5 6
15 7 8 9 10 11 12 13
16 14 15 16 17 18 19 20
17 21 22 23 24 25 26 27
18 28 29 30 1 2 3 4
19 5 6 7 8 9 10 11

Use the calendar's DayCellTemplate property to customize day cells.