Keyboard

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).

Accessibility and Screen Readers

The Scheduler uses the aria-activedescendant attribute to identify the active keyboard navigation target for assistive technologies. Users can press Tab to focus the Scheduler and then use the arrow keys to move through cells and events. When the active item changes, screen readers read the value of the aria-label attribute assigned to the active cell or event.

The default value of keyboardTarget` is "document". This means that arrow keys can move the Scheduler keyboard cursor even when the focus is elsewhere on the page. In this mode, screen readers will not announce the active Scheduler item unless the Scheduler itself has focus, because the aria-activedescendant attribute is only read for the focused element.

Scheduler events use an aria-label value that describes the event. By default, the description includes the event text, start, end, and resource name. You can set a custom description using onBeforeEventRender:

onBeforeEventRender: args => {
  args.data.ariaLabel = "Custom event description";
}

The aria-label attribute is prepared for all events in advance.

Scheduler cells also use an aria-label value. By default, the cell description includes the start, end, and resource name. To keep the DOM size small, the cell aria-label is added dynamically just before the cell receives keyboard focus.

You can customize the cell description using onBeforeCellRender:

onBeforeCellRender: args => {
  args.cell.properties.ariaLabel = "Custom cell description";
}

API

• keyboardEnabled

• keyboardTarget

• keyboard.focusCell()

• keyboard.focusEvent()

• keyboard.getFocus()

• keyboard.move()

• keyboard.resetFocus()

• onEventEditKeyDown

• onKeyboardFocusChange

• onKeyboardFocusChanged

• onKeyDown

Demo

• Keyboard Access Demo (Scheduler)

JavaScript Tutorials

• JavaScript Scheduler: Keyboard Navigation

• JavaScript Scheduler: How to Use the Keyboard API