All Components

Selection

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 selection—Implemented through the Ctrl key while selecting dates.
  • Range selection—Implemented through the Shift key while selecting date ranges.
  • Week selection—Represents range selection for a specific week.

The Ctrl key allows the user to perform multiple selection:

  • Ctrl+ mouse click—Marks 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 click—Selects all dates between the last selected one (with SPACE or mouse click) and the clicked cell.
  • Shift+ mouse click—When 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.

<div id="vueapp" class="vue-app">
    <kendo-calendar :value="new Date()" selection
                    :selectable="'multiple'"
                    :week-number="'true'"
                    :disable-dates='["we", "th"]'></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({ el: '#vueapp' })
In this article