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 |
|
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"
}
]
}
})