# Keyboard Navigation

The Kendo UI for Vue Scheduler component provides keyboard navigaiton out-of-the box.

## Slot Keyboard Navigation

Available shortcuts:

| SHORTCUT | DESCRIPTION                                                                                                                                                                                                                 |
| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Left`   | Focuses the slot on the `left` of the current `slot`.                                                                                                                                                                       |
| `Right`  | Focuses the slot on the `right` of the current `slot`.                                                                                                                                                                      |
| `Up`     | Focuses the slot `above` the current `slot` in the view.                                                                                                                                                                    |
| `Down`   | Focuses the slot `bellow` the current `slot` in the view.                                                                                                                                                                   |
| `Tab`    | Focuses 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. |
| `Enter`  | Opens quick create with the slot's start, end, all-day status, and resources when adding events is enabled. If `quickCreate` is `false`, opens the full editor instead.                                                     |

## Quick Create Keyboard Navigation

Opening quick create focuses the title field. `Tab` and `Shift + Tab` move between the title and the **More options**, **Cancel**, and **Save** actions. Press `Enter` in the title field to save, or `Escape` anywhere inside the popover to dismiss it. Saving or dismissing returns focus to the originating slot without scrolling. **More options** opens the full editor and preserves the entered title.

## Item Keyboard Navigation

| SHORTCUT                | DESCRIPTION                                                                                                                          |
| :---------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
| `Left`                  | Focuses the slot on the `left` of the current `item`.                                                                                |
| `Right`                 | Focuses the slot on the `right` of the current `item`.                                                                               |
| `Up`                    | Focuses the slot `above` the first slot of the current `item`.                                                                       |
| `Down`                  | Focuses the slot `bellow` the first slot of the current `item`.                                                                      |
| `Enter`                 | Opens the event overview. When `eventOverview` is `false`, triggers the form `edit`, or the `occurrenceDialog` for a recurring item. |
| `Tab`                   | Focuses the `next` available item, sorted by `group`, `isAllDay`, `range`  and `start` - In this order.                              |
| `Shift + Tab`           | Focuses the `previous` available item, sorted by `group`, `isAllDay`, `range`  and `start` - In this order.                          |
| `Delete` or `Backspace` | Deletes the event after a confirmation from the user.                                                                                |

## Event Overview Keyboard Navigation

Opening the event overview focuses **Edit**, or **Delete** when editing is not permitted but removal is. `Tab` and `Shift + Tab` move between the available actions. With focus inside the overview, press `Escape` to close it and return focus to the event without scrolling. Overviews without actions leave focus on the event and can be dismissed by an outside click. Agenda tasks retain their existing keyboard behavior.

## Play around with the Keyboard Navigation

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/keyboard-navigation/basic/source.txt)

## Suggested Links

* [Editing in the Kendo UI for Vue Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing)
* [API Reference of the Kendo UI for Vue Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops)