Home
← All questions

Design Google Calendar (frontend) | Frontend System Design

HardPremiumSystem Design

Frontend System Design interview practice: Frontend system design for a calendar app with multiple views and event management.

Problem

Design a calendar application with day/week/month views, event creation/editing, overlapping events, recurring events, and reminders.

Discussion areas

  • Views: day/week/month; shared event data, different layout layers. Time-grid math for positioning (minutes → pixels).
  • Overlap layout: group concurrent events into columns and split width (interval-graph coloring) — see the machine-coding calendar question.
  • Recurrence: store rules (RRULE) and expand occurrences within the visible range on the client; handle exceptions/edits to a single occurrence vs the series.
  • Data loading: fetch events for the visible date range; cache by range; prefetch adjacent ranges.
  • Time zones: store UTC, render in the user's TZ; DST handling.
  • Interactions: drag to create, drag/resize to reschedule (optimistic update), conflict indicators.
  • Reminders/notifications: scheduling, background sync.
  • Performance: virtualize long agendas, memoize layout computations per range.
Premium question

Unlock the full model solution for this question with Mentoxis Premium.

Unlock with Premium