30% offEnding soon
FSD-005Frontend system design Premium

Design a Scheduler and Time-Slot Picker

Design a time-slot scheduler with correct time-zone semantics, live availability, temporary holds, accessible interaction, and conflict-safe booking.

Intermediate 44 min read

A scheduler chooses an interval on a real timeline, not a string on a clock. Keep the resource time zone, exact instant, duration, availability version, and hold state explicit. The browser presents candidates; the server grants a short-lived hold and confirms the booking once.

A date picker can work with calendar dates. A scheduler cannot stop there. "9

AM" needs a date, a named time zone, and a rule for the days when clocks move. A free slot can become occupied between rendering and confirmation.

The design must keep temporal correctness and booking correctness visible instead of hiding them inside formatting code.

Start with the booking identity

A useful appointment value includes:

  • resource or calendar ID;
  • exact start instant;
  • duration or exact end instant;
  • named time zone used for presentation and policy;
  • service version or hold token during confirmation.

The named zone matters even when the instant is exact. It explains why an appointment appears at a particular local time and how future recurring rules would be interpreted.

The public interview prompt

Design a reusable scheduler and time-slot picker for appointments across time zones. Explain:

  • slot identity, exact instants, resource zones, duration, and form serialization;
  • date navigation, grouping, selection, hold, confirmation, expiry, and cancellation;
  • versioned availability, stale responses, capacity, conflicts, retries, and idempotency;
  • daylight-saving gaps and folds, locale labels, right-to-left layout, and travel;
  • keyboard, screen-reader, pointer, touch, zoom, and narrow-screen behavior;
  • security, privacy, observability, testing, rollout, and future evolution.

Assume a service can return bounded availability, create a short-lived hold, and confirm it. Version one handles one resource and one attendee, not recurring meetings, group polls, or multi-resource optimization.

What the premium solution covers

The complete solution defines interval identity, Temporal-based conversion boundaries, daylight-saving policies, availability and hold APIs, a reservation state machine, stale guards, idempotent confirmation, focus-stable refreshes, mobile list adaptation, conflict recovery, privacy controls, performance budgets, deterministic time tests, rollout gates, and an interview scoring rubric.

Original media shows the candidate-to-hold-to-confirm lifecycle and a repeated wall-clock hour with two distinct instants. A deterministic lab demonstrates why a selected-looking slot is not booked until the server grants and confirms a hold.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

What value should a scheduler store?
Store an exact start instant, duration or end instant, and the named time zone that gives the event local meaning. A display string such as 9:30 AM is not enough because the same wall time can occur twice or not exist during a daylight-saving transition.
Why does a selected slot need a server hold?
A visible slot is only a candidate. Another person may book it before confirmation. A short-lived, server-issued hold narrows that race and gives the confirmation request an explicit token, expiry, and idempotency boundary.
How should a scheduler handle daylight-saving time?
Generate and validate slots in the resource's named time zone. Detect nonexistent and repeated wall times, label repeated occurrences with offsets or zone names, and define whether duration means elapsed time or wall-clock time.
Can the browser be the source of truth for availability?
No. The browser may cache and present a versioned availability snapshot, but the service must validate the resource, duration, permissions, capacity, hold token, and current conflicts when a booking is confirmed.
How should time slots be rendered accessibly?
Use ordinary buttons or a well-defined selection pattern, keep the date and time context in each accessible name, expose unavailable reasons, preserve logical focus during refreshes, and provide a list view when a dense timetable is difficult to navigate.
What happens when a hold expires?
Keep the chosen slot visible, mark the hold as expired, disable the stale confirmation action, and offer a fresh availability check. Never imply that the appointment remains reserved after the server's expiry time.