Overview

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

The Calendar component allows users to select dates and navigate through months and years.

Multiple Selection

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

In this demo module, the Calendar component allows you to select several dates simultaneously. Click a date while you press Ctrl to add a date to the selection.

Date Range

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

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
36 29 30 31 1 2 3 4
37 5 6 7 8 9 10 11
38 12 13 14 15 16 17 18
39 19 20 21 22 23 24 25
40 26 27 28 29 30 1 2
41 3 4 5 6 7 8 9

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
36 29 30 31 1 2 3 4
37 5 6 7 8 9 10 11
38 12 13 14 15 16 17 18
39 19 20 21 22 23 24 25
40 26 27 28 29 30 1 2
41 3 4 5 6 7 8 9

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