Scheduling, dates, times, bays
Composable calendar primitives covering everything the Oak Flats workshop has to schedule — month overview, daily bay timelines, range pickers for reporting windows, recurrence rules for ADR checks, and availability grids for live booking.
Scheduling, dates, times, bays is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Scheduling, dates, times, bays: Composable calendar primitives covering everything the Oak Flats workshop has to schedule — month overview, daily bay timelines, range pickers for reporting windows, recurrence rules for ADR checks, and availability grids for live booking.
Pick a surface
Each primitive renders full scale in its own sub-route with realistic Oak Flats domain data — bay jobs, fitment slots, ADR checks, and week-on-week handovers.
Month view
Full 7×6 month grid with weekday strip, stacked event chips, overflow indicator, and a today ring tinted with the brand red.
Inspect primitive states 02Week view
Seven hourly columns 06:00 – 22:00 with absolute-positioned event blocks and a live now-line crossing the current hour.
Inspect primitive states 03Day view
Single-day timeline with hourly rows, 30-min half-row divider, inline event stack with title plus time chip, and faint guides for empty slots.
Inspect primitive states 04Agenda view
Vertical agenda list grouped by day with sticky day headers, per-day counts, and tone-tinted rows for fast triage.
Inspect primitive states 05Mini date picker
Compact month picker with prev/next chevrons, weekday labels, and click-or-keyboard selection. Highlights today, selected, and range endpoints.
Inspect primitive states 06Date range picker
Side-by-side dual-month view bridged by a contiguous range fill, plus preset chips: Today, Yesterday, Last 7 days, This month, Last month, Custom.
Inspect primitive states 07Time picker
Scrollable hour and minute columns with a 12h/24h toggle. Selection moves with arrow keys; AM/PM chips appear in 12h mode.
Inspect primitive states 08Time range picker
Two time pickers side-by-side as From / To with a live duration readout and a visual invalid state when To is not greater than From.
Inspect primitive states 09Recurrence picker
Every-N days/weeks/months with weekday-of-week chips, day-of-month entry for monthly, and end conditions: never, on date, or after N occurrences.
Inspect primitive states 10Schedule grid
Generic weekly slot grid: rows are hours, columns are weekdays. Each cell cycles between available, booked, and blocked when tapped.
Inspect primitive states 11Event card
Inline event card used inside cells. Compact and expanded variants with title, time chip, attendees stack, location, and tone strip.
Inspect primitive states 12Availability grid
Workshop bay availability across hours of the day. Each cell coloured by occupancy: free, busy, blocked, or in maintenance.
Inspect primitive states