Design a calendar frontend like Google Calendar
PremiumFrontend systemMedium
- Overlap layout
- Recurrence expansion
- Time zones
Quick answer
This frontend system interview question asks you to design a calendar frontend like Google Calendar. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of a calendar app like Google Calendar or Outlook on the web, with day, week and month views and events created or moved by dragging. The hard part is laying out overlapping events, expanding recurring events, and getting time zones and daylight saving right.
Users flip between weeks, create an event by dragging on empty time, move and resize events by dragging, and open an event to edit it. Events can repeat (every weekday, every second Tuesday, monthly on the 15th), can be all-day or span midnight, and can come from several calendars the user has toggled on. The user may travel and change time zone.
What must a calendar frontend like Google Calendar do?
- Views: Day, week (7 columns of 24 hours) and month grids, plus an agenda list; Today, previous and next buttons; a mini month picker.
- Overlaps: Events that overlap in time sit side by side without hiding each other; all-day events sit in a strip at the top.
How well must it do it?
- Navigation: Next and previous week render in under 100 ms when prefetched.
- Interaction: Drag previews follow the pointer at 60 fps and snap to 15 minutes.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Overlap layout
- Recurrence expansion
- Time zones
- Daylight saving time
- Range caching
- Drag to resize
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a calendar frontend like Google Calendar and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team