Wrapper Components / Scheduler

Keyboard Navigation

The keyboard navigation of the Scheduler is always available.

The toolbar of the Scheduler supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
F10 Focuses the toolbar.
Tab Focuses the next toolbar item.
Shift+Tab Focuses the previous toolbar item.
Enter or Space Activates the toolbar item.
Right Arrow Focuses the next view when the focus is on the view container.
Left Arrow Focuses the previous view when the focus is on the view container.

The table of the Scheduler supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Arrow Keys Changes the selected cell.
Enter
  • Creates a new event on the selected cells.
  • Opens the Edit window for the selected event.
Tab Focuses the next available event.
Shift+Tab Focuses the previous available event.
1 to 5 Switches between the available views.
Esc Closes the Edit popup window.
Shift+Arrow Keys Selects multiple cells.

The following example demonstrates how to implement the Enter and Space keyboard shortcuts.

<div id="vueapp" class="vue-app">
    <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :selectable="true"
                     :show-work-hours="true"
                     :timezone="'Etc/UTC'">
      <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'workWeek'" :selected="true"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>
</div>
Vue.use(SchedulerInstaller);

new Vue({
    el: "#vueapp",
    data: {
        date: new Date('2018/6/6'),
        localDataSource: [
            {
              id: 1,
              start: new Date("2018/6/6 08:00 AM"),
              end: new Date("2018/6/6 09:00 AM"),
              title: "Interview"
            },
            {
              id: 2,
              start: new Date("2018/6/6 08:00 AM"),
              end: new Date("2018/6/6 09:00 AM"),
              title: "Meeting"
            }
        ]
    }
})

In this article