Scheduler - Keyboard | PrimeUI Pro

#Usage

import { Scheduler } from '@primeui/vue-scheduler';

<Scheduler.Root selectable :selection-mode="selectionMode" :aria-label="ariaLabel" @date-select="onDateSelect" @selection-change="onSelectionChange">
    <!-- Scheduler parts -->
</Scheduler.Root>

Keyboard support is part of the same Scheduler surface as pointer selection. Enable selectable, choose the selection mode the workflow needs, and provide an ariaLabel that names the schedule for assistive technology.

#Options

selectionMode controls how keyboard date selection is stored. Use single for one target, multiple for a set of dates, range when the user needs a start and end, and none when keyboard navigation should not create a selection.

import type { SchedulerSelectionMode } from '@primeui/vue-scheduler';

const selectionMode: SchedulerSelectionMode = 'range';
const ariaLabel: string = 'Team schedule';

date-select fires when the focused date or time target is activated. selection-change is useful when the page needs the full selected-date set, especially in multiple and range modes.

#Focus Model

Scheduler uses visible keyboard targets instead of hidden focus state. When focus is on a Scheduler-owned date, time slot, event, agenda row, timeline cell, appointment slot, or resource row, Scheduler handles the relevant keyboard movement and activation.

Toolbar controls, view selectors, inputs, menus, listboxes, dialogs, tabs, and other nested controls own their own keys. Arrowing through a select or pressing keys inside an editor should not move the Scheduler grid behind it.

#Keys

Key	Scheduler-owned target	Behavior
`Tab` / `Shift + Tab`	Page, toolbar, Scheduler targets	Moves to the next or previous focusable control
`ArrowLeft`	Date, time, timeline, and grouped targets	Moves to the previous logical date, slot, or cell
`ArrowRight`	Date, time, timeline, and grouped targets	Moves to the next logical date, slot, or cell
`ArrowUp`	Time-grid and grouped targets	Moves to the previous slot, row, or related target
`ArrowDown`	Time-grid and grouped targets	Moves to the next slot, row, or related target
`Home` / `End`	Grid-like targets	Moves to the start or end of the supported row or range
`PageUp` / `PageDown`	Scheduler date navigation	Moves by the larger visible range where supported
`Enter`	Dates, slots, events, resources, overlays	Activates the focused target
`Space`	Selectable targets and controls	Activates the target or toggles selection where the surface supports toggle
`Escape`	Overlays and transient Scheduler state	Closes the active overlay first, then clears selection or focus state
`Delete` / `Backspace`	Selected events	Removes selected events only when focus is not in an editing field

Right-to-left layouts keep logical date movement. ArrowRight moves to the next date or slot and ArrowLeft moves to the previous date or slot in both LTR and RTL schedules.

#Scheduler Targets

Keyboard targets are view-aware, so the same keys stay close to the shape of the current view.

Surface	Keyboard behavior
Month cells	Move by day or week, activate selection, and skip disabled or constrained dates
Week and day time slots	Move by slot or day, activate `date-select`, and stay inside the visible scheduler body
All-day events	Receive focus and activate the same event path as pointer interaction
Timeline cells	Move through horizontal time cells and keep the focused cell visible
Resource timeline cells	Preserve resource and date context while moving through the timeline
Year mini-month days	Activate real days and keep placeholder days unfocusable
Agenda rows	Activate event rows without changing the visible agenda range
Resource rows	Expand or collapse parent rows with keyboard and activate leaf rows
Appointment slots	Activate booking or slot-click flows without conflicting with date selection
More popover rows	Keep overflow events reachable, draggable where the view supports it, and dismissible by keyboard
Quick info and popovers	Keep overlay content keyboard dismissible without moving grid focus behind the overlay
Context menu	Runs menu actions from keyboard and closes without changing Scheduler focus

#Timed Week

Focus a time slot or event, then use the arrow keys and Enter to move and activate the Scheduler target.

Loading Demo...

#Selection Modes

Keyboard selection follows the pointer-selection mode on the same root.

Mode	Keyboard selection behavior
`none`	Navigation can move focus, but date activation does not store a selection
`single`	Activation replaces the current selected date
`multiple`	Activation toggles dates in the selected set
`range`	First activation sets the anchor; the next activation completes the range

Use selectAllow, selectConstraint, minDate, and maxDate the same way you use them for pointer selection. Disabled and constrained dates should not become keyboard-selectable targets.

#Month Grid

Month view uses the same visible-focus contract on date cells. Focus a date, move by day or week with the arrow keys, and activate the focused date with Enter or Space.

Loading Demo...

#Custom Controls

When a custom child outlet renders a native button, input, select, menu item, tab, or listbox, keep the native element or ARIA role. Scheduler ignores those nested controls so their arrow keys and activation keys stay local.

For a custom composite control that uses a non-standard wrapper, add data-scheduler-keyboard-owner to the element that should own keyboard input.

<div role="listbox" tabindex="0" data-scheduler-keyboard-owner>
    <!-- Custom options -->
</div>

Do not add tabindex to decorative wrappers. A focusable element should either activate something, move inside a real control, or expose a Scheduler target.

#Overlays

Scheduler overlays have their own keyboard path. Escape closes more popovers, quick info, event popovers, and context menus from inside the overlay. Dialog-style overlays should keep a visible close action, and custom overlay content should avoid trapping focus unless it implements a complete modal interaction.

#API

Keyboard behavior is affected by ariaLabel, selectable, selectionMode, selectAllow, selectConstraint, eventSelection, quickInfo, overlays, custom child outlets, and the focused Scheduler view.