DevExtreme jQuery/JS - Keyboard Support

An end user can use the following keys to interact with the widget.

Widget Element Key / Key Combination Action
Scheduler Widget Tab / Shift+Tab Shifts focus to the next/previous appointment.
Shift + Mouse Wheel Scrolls the content left/right if the horizontal scrolling is taking place.
Date Navigator Tab / Shift+Tab Shifts focus to the next/previous element within the navigator.
Enter or Space Selects the focused element of the navigator.
View Switcher ← or → Switches between scheduler views.
Timetable ← / → / ↑ / ↓ Selects the previous/next/top/bottom cell.
Enter or Space Invokes the appointment details form for the currently selected cell.
Shift + ← / → / ↑ / ↓ Selects several cells.
Shift + Space or Enter + ← / → / ↑ / ↓ Invokes a popup window for currently selected cells.
Popup Window Tab / Shift+Tab Shifts focus to the next/previous element within the window. Editors within the window are controlled by their own keyboard shortcuts.
Appointments Tab / Shift+Tab Shifts focus to the next/previous appointment.
Enter or Space Invokes the appointment details form.
Delete Deletes the current appointment.
Appointment Tooltip Tab / Shift+Tab Shifts focus between tooltip elements.
Enter or Space Selects the focused element in the tooltip.

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

JavaScript
  • function registerKeyHandlers () {
  • let scheduler = $("#schedulerContainer").dxScheduler("instance");
  • scheduler.registerKeyHandler("backspace", function (e) {
  • // The argument "e" contains information on the event
  • });
  • scheduler.registerKeyHandler("space", function (e) {
  • // ...
  • });
  • }
See Also