Calendar - Overview

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

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

Calendar - 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
31 26 27 28 29 30 31 1
32 2 3 4 5 6 7 8
33 9 10 11 12 13 14 15
34 16 17 18 19 20 21 22
35 23 24 25 26 27 28 29
36 30 31 1 2 3 4 5

Calendar - Date RangeNew

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

Calendar - 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
31 26 27 28 29 30 31 1
32 2 3 4 5 6 7 8
33 9 10 11 12 13 14 15
34 16 17 18 19 20 21 22
35 23 24 25 26 27 28 29
36 30 31 1 2 3 4 5

Calendar - Day Cell Customization

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

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