Overview

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

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

Multiple Selection

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.

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

Date Range

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 month.

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

Disabled Dates

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.

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

Day Cell Customization

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

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