All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      Calendar / Multiple Selection

      Multiple Date Selection

      Description

      Starting from Kendo UI 2017 R3 release calendar allows multiple selection to be performed by using the selectable configuration property.

      The multiple selection functionality of the calendar widget can be summarized in several key points:

      1. Multiple Selection - Ctrl key is used while selecting dates.
      2. Range Selection - Shift key is used to select range of dates.
      3. Week Selection - Range selection for a specific week.

      The Ctrl key allows user to perform multiple selection:

      • Ctrl + Mouse Click on specific date will mark the date as selected and other previously selected dates will remain selected as well.
      • Selecting a date from a specific view without using Ctrl key will deselect all previously selected dates (including previously selected dates from other views/months) and select the date of the clicked cell.
      • Selecting a date that is already selected while holding the Ctrl key will remove the date from the selection.

      The Shift key allows 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 there is no previous selection will select all dates from the beginning to the clicked cell.

      When user clicks on a specific week number the calendar selects the entire week. It can be considered as a special case of range selection - starting from first day of the week and selects all dates to the end of the week.

      The Multiple Selection functionality introduces some new key combinations. Those are demonstrated in the Keyboard Navigation demo.

      HTML5/JavaScript source

      Also available for:

      API Reference
      • selection.html
      • Widget configuration

      Support & learning resources

      Calendar for other technologies