DevExtreme Angular - 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.

TypeScript
  • import { ..., ViewChild, AfterViewInit } from "@angular/core";
  • import { DxSchedulerModule, DxSchedulerComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent implements AfterViewInit {
  • @ViewChild(DxSchedulerComponent) scheduler: DxSchedulerComponent
  • ngAfterViewInit () {
  • this.scheduler.instance.registerKeyHandler("backspace", function (e) {
  • // The argument "e" contains information on the event
  • });
  • this.scheduler.instance.registerKeyHandler("space", function (e) {
  • // ...
  • });
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })
See Also