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

Keyboard Navigation

The keyboard navigation of the Scheduler is always available.

Available Shortcuts

The Scheduler supports the following keyboard shortcuts:

cCreates a new event.
Alt+1, Alt+2...Switches to the view with the specified index.
tNavigates to today's date.
Shift+LeftNavigates to the previous time period.
Shift+RightNavigates to the next time period.
Left Arrow or Up ArrowFocuses the previous event or Toolbar element.
Right Arrow or Down ArrowFocuses the next event or Toolbar element. When focus is in the Toolbar, Down Arrow focuses the first focusable event.
F10Focuses the first focusable Toolbar element.

When an event is focused, the Scheduler supports the following shortcuts:

EnterOpens the edit form for the focused event.
Delete or BackspaceDeletes the event after a confirmation from the user.

The Scheduler Year view supports the following shortcuts:

Right Arrow, Up Arrow, Down Arrow, and Left ArrowChanges the currently focused date in the Calendar.
EnterOpens the tooltip for the currently focused Calendar date. When the tooltip is already open, navigates to Day view.
Delete or BackspaceCloses the tooltip.

Managing Focus

The Scheduler is a single tab stop, and focus is managed through roving tab index and the arrow keys except for the following scenarios:

  • The views of the Scheduler (except the grid-like Agenda view) have an additional tab-stop—the scrollable element that serves as a container for the events.
  • The Scheduler Year view uses the MultiViewCalendar that adds another tab stop.

The following example demonstrates the built-in keyboard navigation of the Scheduler.

View Source
Change Theme:

Event Navigation with the Tab Key

By default, the navigation between the Scheduler events is enabled through the Arrow keys while the Tab key moves the focus to the next page element in compliance with the Fundamental Keyboard Navigation Conventions.

To use the Tab key for event navigation, prevent the default keydown event action and call the focusNext method.

View Source
Change Theme: