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


The Calendar enables you to implement month and multiple selections.

Month Selection

The Calendar allows the user to select a month.

<kendo-calendar start="year" depth="year"></kendo-calendar>

Multiple Selection

The available multiple-selection modes are available:

  • Multiple selectionImplemented through the Ctrl key while selecting dates.
  • Range selectionImplemented through the Shift key while selecting date ranges.
  • Week selectionRepresents range selection for a specific week.

The Ctrl key allows the user to perform multiple selection:

  • Ctrl+ mouse clickMarks a specific date as selected. Previously selected dates remain selected as well.
  • Selecting a date from a specific view without using the Ctrl key deselects all previously selected dates (including previously selected dates from other views or months) and selects the date of the clicked cell.
  • Selecting a date that is already selected while holding the Ctrl key removes the date from the selection.

The Shift key allows the user to select a range of dates in the same month or between different months:

  • Shift+ mouse clickSelects all dates between the last selected one (with SPACE or mouse click) and the clicked cell.
  • Shift+ mouse clickWhen no previous selection was made, selects all dates from the beginning to the clicked cell.

When the user clicks a specific week number, the Calendar selects the entire week. This feature is a special case of range selection which starts from the first day of the week and selects all dates to the end of the week.

The following example demonstrates the new key combinations which are introduced by the multiple selection functionality.

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?