Example of Keyboard Interaction in React Scheduler Component

/
/
KeyboardInteraction

This demo showcases the keyboard shortcuts applicable on Scheduler and also lists out in below description, how those applicable shortcuts interacts with Scheduler actions.

More Details...

Loading....
Description

All the Scheduler actions can be controlled via keyboard keys and is availed by using allowKeyboardInteraction property which is set to true by default. The applicable key combinations and its relative functionalities are listed below.

Keys Description
Alt + j Focuses the Scheduler [Provided from application end].
Tab Focuses the first or active item on the scheduler header bar and then move the focus to the next available event elements. If no events present, then focus moves out of the component.
Shift + Tab Reverse focusing of the Tab functionality. Inverse focusing of event elements from the last one and then move onto the first or active item on Scheduler header bar and then moves out of the component.
Enter key Opens the quick popup on the selected cells or events.
Escape key Closes any of the popup that are in open state.
Arrow keys To move onto the next available cells in either of the needed directions (left, right, top and right)
Shift + Arrow keys For multiple cell selection on either direction.
Delete key Deletes one or more selected events.
Ctrl + Click on events To select multiple events.
Alt + Number keys (from 1 to 6) To switch between the views on Scheduler.
Ctrl + Left Arrow keys To navigate to the previous date period.
Ctrl + Right Arrow keys To navigate to the next date period.
Left or Right Arrow keys On pressing any of these keys when focus is currently on the Scheduler header bar, moves the focus to the previous or next items in the header bar.
Space or Enter keys It activates any of the focused items.
Page Up & Page Down keys To scroll through the work cells area.
Home key To move the selection to the first cell of Scheduler.