Skip to content

Design a calendar (frontend)

Design the web client for a calendar: day, week and month views, creating and editing events, events that repeat, and invitations to other people.

System designFrontend and full stackCollaborationMid-levelSenior

What to work through

Work through a calendar as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Show a day, a week and a month, and move between them
  • Create, edit and delete an event, by a form or by dragging on the grid
  • Repeat an event, and edit one occurrence, it and the ones after it, or the whole series
  • Invite people to an event and show their replies
  • Show several calendars at once, each in its own colour, each shown or hidden

Constraints to discuss

  • A busy day of 50 events draws without lag, and a drag runs at 60 frames a second
  • A click or a drag answers within 200 milliseconds
  • Every event shows at the right time in the viewer's time zone, across daylight saving changes
  • The grid works by keyboard and with a screen reader
Need a starting point?

Watch for these common gaps as you prepare:

  • Storing every occurrence of a repeating event, so an endless series never fits
  • Storing a repeating event as fixed UTC times, so it shifts an hour across daylight saving
  • Editing occurrences one by one when the person meant the whole series or this and following
  • Taking an event's date from its UTC string, which can be a different day for the viewer
  • Drawing every event of a heavy month in full
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)Messaging and notificationsDesign a chat app (frontend)CollaborationDesign a collaborative document editor (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.