javascript scheduler keyboard navigation

Since version 2020.4.4766, the Scheduler supports grid navigation using arrow keys.

Features:

  • The keyboard support needs to be activated using the keyboardEnabled property. It is disabled by default.
  • You can navigate the grid using arrow keys (up, down, left, right)
  • When you first press an arrow key the Scheduler will focus the item in the upper-left corner of the current Scheduler viewport.
  • The Scheduler can focus cells and events.
  • Shift + left and Shift + right will start a time range selection. onTimeRangeSelect/onTimeRangeSelected will be fired when you release the Shift key.
  • The <enter> key will fire onTimeRangeSelect/onTimeRangeSelected for the current cell (if a cell is focused) or onEventClick/ed for the current event (if an event is focused).
  • If you set rowMarginTop or rowMarginBottom, the keyboard navigation will work in a special mode where you can use the margin to move between cells.
  • By default, the Scheduler watches keydown/keyup events on the document object. You can change the target to the main Scheduler <div> using keyboardTarget property.

Limitations:

  • Frozen rows are not accessible using keyboard.
  • The useEventBoxes property must be set to "Always". The keyboard navigation doesn't work with other modes.
  • The keyboard focus can only access whole cells (even if snapToGrid is disabled).

API

Demo

JavaScript Tutorials