New to Kendo UI for Angular? Start a free 30-day trial

Calendar Selection

The Calendar initially operates in single selection mode. To switch to either multiple or range selection, adjust the selection input property accordingly.

Multiple Selection

To enable multiple selection, set the selection input property to multiple. The following keyboard and mouse actions are available:

Using the Ctrl (or Cmd on Mac) key allows the user to perform the following multiple selection actions:

  • Pressing Ctrl (or Cmd on Mac) + mouse click (or Enter) on a date will mark the date as selected and other previously selected dates will remain selected as well.
  • Selecting a date without using the Ctrl (or Cmd on Mac) key will deselect all previously selected dates (including previously selected dates from other views or months) and will select the date of the clicked cell.
  • Selecting a date that is already selected while holding the Ctrl (or Cmd on Mac) key will remove the date from the selection.

Using the Shift key allows the user to select multiple dates in the same month or between different months in the following ways:

  • Shift + mouse click (or Enter) will select all dates between the last one selected and the clicked cell.
  • Shift + mouse click (or Enter) when no previous selection was made will select the date of the clicked cell.

Clicking a specific week number will make the Calendar select all dates from the week. This behavior is available when the weekNumber property is set to true.

Example
View Source
Change Theme:

Range Selection

To enable range selection, set the selection input property to range.

The default keyboard navigation can be used to select a start and end date range using the arrow and the Enter keys for selection. Week range selection is also available by setting the weekNumber property to true.

Example
View Source
Change Theme:

In this article

Not finding the help you need?