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

jQuery
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) {
        // ...
    });
}
Angular
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