Stivot Mobile Calendar — Responsive Preview
These phone frames embed the live admin-calendar.html at 375 px, so each frame is the exact mobile rendering produced by the PC page's responsive layer (@media max-width:768px) — no separate mobile markup to drift out of sync. Resize the desktop page itself to see the same views.
Single source of truth: the calendar UI lives only in admin-calendar.html (and instructor-calendar.html). This file is a preview harness — each frame requests its view via the URL (?view=day|week|month).
Day
Day view — operations focus
  • One section per instructor; blocks positioned by time-axis grammar (FD / AM / PM / EVE)
  • Single-row blocks with pickup chips; double-booking shows the cascading conflict layout + ⚠
  • Filter chips open bottom sheets · Day/Week switcher · ☰ opens the v6 nav drawer
Week
Week view — pattern check
  • Compact grid: name column + 3 days visible at 375 px, rest scrolls horizontally
  • Blocks sized to the cell; busy days collapse extras into a "+N more" pill
  • Tap a cell → drill into that instructor × day
Monthly
Monthly — pick an instructor
  • Monthly tab first lists every instructor (all visible); tap one to drill in
  • The selected instructor's month opens as a bottom sheet (mini month + insight strip)
  • Back arrow returns to the instructor list — Dashboard still owns company-wide views
Menu (drawer)
Navigation drawer — v6 naming
  • ☰ slides in the global nav over a backdrop
  • v6 labels: Booking · Billing → Instructors/Agents/Referrals · Customer → Guests/Agents · Catalog · Account
  • Same #sidebar DOM node as the desktop sidebar — one source of truth