Scheduler

Calendar/agenda WC with day / week / month / year / timeline views. Drag across the grid to select a range — the WC emits event-create with the range; the consumer decides whether to materialise an event (or open a confirmation modal). Listen to events with the standard @event-name syntax.

Keyboard shortcuts
  • Getting in: Tab walks the header, then the grid, then the events. Inside the grid the arrow keys walk cells.
  • Cell navigation — week / day: / move one time slot, / one day (week only). Timeline: / move one slot in time, / one resource. Month: / walk days, / one week. Year: / walk months, / three months. Crossing a month or year boundary advances the displayed period.
  • Jumps: Home / End first / last slot of the column · Ctrl + Home / Ctrl + End first / last cell of the view · PageUp / PageDown previous / next period
  • Selecting a range: Shift + arrow extends a time range, crossing day boundaries on the week view. Esc clears it.
  • Committing: Enter on a cell or a selection emits event-create carrying the range — a request, not a write. The scheduler stores nothing itself; this page's handler materialises the event and then calls clearSelection().
  • On a focused event: / walk to the previous / next event by start time (no wrap) · Delete / Backspace emits event-delete · Esc returns focus to the grid
  • Move mode: M or Enter on a focused event enters move mode. Arrow keys nudge the event in time (or across resources on the timeline), Shift + arrow resizes the end edge, Alt + Shift + arrow resizes the start edge. Enter commits, Esc cancels.
  • Touch resize: tap an event to select it, then drag the round handle at its top or bottom edge (left/right on timeline) — the resize starts immediately, no hold needed. Moving an event by touch stays hold-then-drag (600 ms).
  • Mouse resize: drag the top or bottom edge of any resizable event (selected or not); the selected event shows the round handles as the visual affordance.
  • Edit without dragging: double-click / double-tap, right-click, or F2 on an event opens the scheduler's built-in editor (title, start/end, colour, delete) — the single-pointer, non-drag alternative (WCAG 2.5.7). Disable it with :event-editor="false" to bring your own form.
  • Views: Alt + T today · Alt + Y year · Alt + M month · Alt + W week · Alt + D day. These work from anywhere in the scheduler; bare letters are deliberately not hot-keys.

Today's agenda

Source