Calendar on mobile
On viewports ≤ 720 px, the calendar collapses to one staff column at a time with a horizontal swipeable strip of avatars above. Long-press replaces right-click. Resize handle grows to 12 px. Default view is Agenda.
The calendar isn’t a separate mobile app — it’s the same React code that responds to viewport width. At 720 pixels and below, it collapses the multi-staff column grid into a one-staff-at-a-time view with a horizontal staff strip on top.
What changes at ≤ 720 px
| Concern | Desktop | Mobile |
|---|---|---|
| Staff layout | All staff side-by-side | One staff column at a time |
| Staff switcher | (Whole grid visible) | MobileStaffStrip of avatars above the grid |
| Right-click | Context menu | Long-press (500 ms) → same context menu |
| Resize handle | 8 px tall | 12 px tall with grip indicator |
| Default view first load | Day | Agenda |
| Day navigation | Toolbar arrows / ← → | Toolbar arrows / horizontal swipe on grid edges |
| Modal layout | Centered card | Slides up from bottom (bottom-sheet) |
| Hover preview | Visible | Skipped (no hover state on touch) |
The mobile staff strip
Above the calendar grid, a horizontal scroll of staff avatars:
- Each avatar is 44 × 44 px (WCAG AA touch target)
- Active staff: filled in their accent colour
- Inactive: outlined
- Today’s appointment count for each staff appears as a badge
Tap an avatar to switch the visible column. The current state persists across reloads (it’s component state — refresh resets to the first staff).
Touch gestures
- Tap an event → opens the details modal as a bottom-sheet
- Tap an empty cell → opens the New Appointment modal as a bottom-sheet
- Long-press (500 ms) → context menu (events: View / Mark complete / etc; cells: New / Block this time)
- Drag an event → reschedule (after long-press, then drag)
- Drag bottom of an event → resize
- Horizontal swipe on grid edges → previous / next day
- Pinch is not yet wired (toolbar zoom buttons work on touch)
What doesn’t work on mobile
- Alt-drag duplicate — Alt key isn’t a thing on touch. Use the context menu’s “Duplicate” workaround if shipped, or duplicate via the details modal Edit flow.
- Drag across staff — only the active staff column is visible, so cross-staff drag isn’t natural. Use Edit mode in the details modal to change the staff assignment instead.
- Cmd-K-style search — use the toolbar buttons; keyboard shortcuts assume a hardware keyboard.
Designing for mobile
- The mobile default view is Agenda because most mobile operators are checking what’s next rather than editing the schedule. The Day grid view is one tap away.
- The bottom-sheet modal pattern keeps reachable controls in the thumb zone of one-handed use.
- The 12-px resize handle is large enough to grab without zooming in.
If you mostly operate from a phone, set the mobile view default to your preferred view (Day / Agenda / Week) — it persists per tenant.