Calendars, from a month grid to a resource timeline#
Calendar is one word covering several unrelated problems. Picking a date, running a booking flow, scheduling rooms and reading an agenda need different interfaces, and building one component that does all four is how calendars become unusable.
The eight calendar blocks#
- Calendar 1: a month application with a sidebar, filterable calendars and a day detail sheet.
- Calendar 2: a week time grid with positioned events and a mobile agenda fallback.
- Calendar 3: a class booking flow with timezone-aware slots, a waitlist and a directional date-change transition.
- Calendar 4: a rooms-by-hour resource timeline with overlap lane-splitting and a real now-line.
- Calendar 5: a grouped agenda list with a derived streak strip, composed filters and sticky day headers.
- Calendar 6: a front-desk switcher that swaps the day list, with live capacity badges and a join-waitlist action.
- Calendar 7: a short intake questionnaire that assembles a computed recommended week.
- Calendar 8: a plain month grid with a selected-day list. No shell, no filters, no dialogs. Free, and the one to reach for when the calendar is part of a page rather than the page.
Month, week or agenda#
A month grid answers what is happening this month and is bad at showing time of day. A week grid answers when exactly and cannot hold more than about seven days. An agenda list answers what is next and works on any screen, which is why Calendar 2 falls back to one on mobile rather than shrinking a time grid nobody can tap.
Overlapping events#
Calendar 4 splits overlapping bookings into lanes so two events at the same hour are both readable, and draws a now-line across the resources. Stacking overlaps on top of each other is the default failure, and it hides exactly the conflicts a scheduling view exists to surface.
Timezones in a booking flow#
Calendar 3 resolves slots in the viewer timezone and says which timezone it is using. This is the part of a booking screen that fails silently: a slot shown in the venue timezone to somebody two hours away produces a confident booking and a missed appointment, with nothing in the interface having looked wrong.
Capacity, waitlists and full slots#
A full slot should say full and offer the waitlist rather than disappearing, because a disappearing slot reads as a bug. Calendar 3 and Calendar 6 both carry live capacity and a working join-waitlist action, and Calendar 6 shows the same day across venues, which is how a front desk actually answers when the next class is.
Keyboard and date entry#
Arrow keys move by day, page keys by month, and the grid keeps a single tab stop so somebody navigating by keyboard is not trapped in forty-two cells. Where a date can be typed, typing it is allowed; a picker that refuses a keyboard is a picker that fights anybody entering a birth date.
Where calendars sit#
Inside an app shell for the scheduling applications, or standing alone for the plain month grid. A booking flow ends in a checkout when the slot is paid for, and the dashboard widgets cover the upcoming-events summary a calendar page is too heavy for.
