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

Keyboard Navigation

The Kendo UI for Vue Scheduler component provides keyboard navigaiton out-of-the box. Both the [Slot] and [Item] components handles the keyboard navigation differently.

Slot Keyboard Navigation

Available shortcuts:

SHORTCUTDESCRIPTION
LeftFocuses the slot on the left of the current slot.
RightFocuses the slot on the right of the current slot.
UpFocuses the slot above the current slot in the view.
DownFocuses the slot bellow the current slot in the view.
TabFocuses the first available item inside the slot. If no item is available inside the slot the first item in the view is focused. If no item is available, fall back to the default handling of the keyDown event.
EnterTriggers the form edit, with predefined start, end, isAllDay and resources.

Item Keyboard Navigation

SHORTCUTDESCRIPTION
LeftFocuses the slot on the left of the current item.
RightFocuses the slot on the right of the current item.
UpFocuses the slot above the first slot of the current item.
DownFocuses the slot bellow the first slot of the current item.
EnterTriggers the form edit, or the occurrenceDialog in case of a recurring item.
TabFocuses the next available item, sorted by group, isAllDay, range and start - In this order.
Shift + TabFocuses the previous available item, sorted by group, isAllDay, range and start - In this order.
Delete or BackspaceDeletes the event after a confirmation from the user.

Play around with the Keyboard Navigation

Example
View Source
Change Theme: