Scheduler

Multi-view calendar (year / month / week / day / timeline) with drag-to-create, drag-to-move, drag-to-resize, and full keyboard navigation. Events and resources are inputs; the component emits semantic (eventCreate) / (eventUpdate) / (eventDelete) requests that the consumer translates into its own data mutations.

Basic usage

Keyboard shortcuts
  • Navigation: Tab walks header → grid → events. Inside the grid, arrow keys walk cells.
  • Cell nav (week/day): ↑/↓ ± one slot in time, ←/→ ± one day (week only). On timeline: ←/→ ± slot in time, ↑/↓ ± resource.
  • Month nav: ←/→ walk days, ↑/↓ ± one week. Crossing a month boundary auto-advances the displayed month. Enter on a day fires event-create for that whole day.
  • Year nav: ←/→ walk months, ↑/↓ ± three months (matching the visual grid). Crossing a year boundary auto-advances. Enter on a month fires event-create for that whole month.
  • Inter-event nav: with focus on an event, ←/→ walks to the previous / next event (sorted by start time). No wrap at the ends.
  • Cell nav extras: Home/End first/last slot of column · Ctrl+Home/Ctrl+End first/last cell of view · PageUp/PageDown previous/next period.
  • Selection: Shift+arrow extends a linear time-range. On week view, Shift+→ at the end of Friday extends into Saturday (the range crosses the day boundary, all slots in between light up).
  • Selection commit: Enter on a cell or selection (and pointer drag-end) fires an event-createrequest carrying the range. The scheduler doesn't create or store the event itself — this demo's handler does that with its own defaults, then calls clearSelection(). Esc clears the selection without emitting a request.
  • Event focus: every event is in the Tab order. Tab to one and the scheduler emits event-selected.
  • Move mode: Enter on a focused event enters move mode. Arrow keys nudge time (or resource on timeline). Shift+arrow resizes the end edge; Alt+Shift+arrow resizes the start edge. On week view, horizontal Shift+arrow pushes the end across day boundaries. Enter commits, Esc cancels.
  • Delete: Delete / Backspace on a focused event emits event-delete.
  • View shortcuts: Alt+T today · Alt+Y year · Alt+M month · Alt+W week · Alt+D day. (Bare letters are no longer hot-keys.)
Keyboard: arrow nav cells · Shift+arrow extend selection · Enter create/move · Alt+T/Y/M/W/D switch views
Event Log

No events yet. Try clicking on the scheduler or loading sample data.

State (0 events)
View: week
Date: Jun 29, 2026, 4:11:47 AM
Selected: None
Events:
[]

Controlled selection