System Design: Build your own Calendar

This is about me learning/preparing for System Design while creating an Calendar app. Blog is not written as a tutorial but more like an personal guide.

I tried to build a google Calendar keeping in mind the what, how and why. This Readme would give you a refresher on how apps like amie, rise, cron(notion calendar now), or google calendar works. I have tried to show the RADIO(requirement, high level Architecture, Data Model, API Design(model), Optimization/performace) process of any design system interview. Feedback or issue are welcome, if you find any mistakes in the technical context of writing or grammatical mistakes that i would have made on my side.

I also tried to write the code for the requirements and build a pretty good clone. In the beginning i was just prototyping in javascript thinking if i will be able to build something complex or with the time limitation. Turn out i did. I rewrote the whole codebase in Typescript. Because why not. Rewriting or refactoring is the best way to learn something and also helps to correct my mistakes that i was not aware of in the beginning. I also didn't do much research while prototyping with javascript. I tried a some libraries that didn't solve my requirements. I faced a lot of issue with date type.

In the begining of january 2024 there were a lot of calendar apps that where getting traction. Getting a good UX of a calendar is very hard. Different Calendars try to solve the UI/UX problems differently. eg:

1. Create an event

   • Rise and cron has a sidebar, whereas google calendar uses a popover

2. Event Display

   • Google Calendar - show start and end time of an event, Background is fully colour,

   • Rise - shows start time only, background has a alpha opacity to it

3. Weekly Display

   • Google calendar - Uses Pagination

   • Rise & cron - uses infinite horizontal scroll (with virtualization)

4. Long Event - Event longer than two days

   • usually are added on the top of timelines,

5. Drag and drop events its usually the same

   • You can drag an events on timeslots, starttime, endtime, and date will change based on the time slot you add in.

6. Drag to create a new events

   • You can drag on timeline to create a new event, it will show a preview of the event with time display

7. Event Types

   • Google Calendar and Amie have tasks and events

   • Rise has events only

8. Sharing Time Slots

   • You can share timeslots for meeting, or anyone can add an event on your calendar.

   • Rise has this auto meeting conflict resolution, which will just schedule a meeting later based on your preferences.

9. Timezones

   • You can change the timezones

---

Understanding dates

There are two way to save dates,

• one save in the ISO string formate

"2024-01-17T09:30:00.000Z" => We will store the user participants timeZone as well. Used by Cal.com

// Assume this timestamp is retrieved from the database
const timestampFromDatabase = "2024-01-16T20:45:00.000Z";

// Get the user's timezone (you might obtain this from user preferences or browser settings)
const userTimezone = "Asia/Kolkata"; // Example timezone

// Create a Date object from the timestamp (in UTC)
const date = new Date(timestampFromDatabase);

// Adjust the date to the user's timezone
date.toLocaleString("en-US", { timeZone: userTimezone });

// Display or use the adjusted date as needed
console.log(date.toLocaleString()); // Adjusted timestamp for the user's timezone

• Storing Date By Amie

other is to save ISO String + the offset => the offset is based on the user locations

const timestamp = "2024-01-16T20:45:00.000+05:30";
const date = new Date(timestamp);

// Format the date with time zone offset
const formattedDate = date.toLocaleString("en-US", {
  timeZoneName: "short",
});

console.log(formattedDate);

TimeStamp to ISOString;

const timestamp = 1704306028000;
const date = new Date(timestamp);

console.log(date.toISOString());

ISOString to TimeStamp;

const today = new Date(); // Current date and time
const todayTimestamp = today.getTime(); // Timestamp in milliseconds

console.log(todayTimestamp);

Important

Google Calendar uses TimeStamps 1704306028000 The value 1704306028000 represents the number of milliseconds since the Unix Epoch (January 1, 1970, UTC). You can convert this timestamp to a human-readable date using JavaScript.

Difference between Locale and Timezone

A locale is a set of parameters that defines the user's language, region, and cultural preferences. It includes information such as language, country, currency, date and time formats, and other regional settings.

A timezone is a region of the Earth that has the same standard time. It is determined by the longitudinal position of the location and can be expressed as an offset from Coordinated Universal Time (UTC).

the locale is more about language and cultural preferences affecting the presentation of information, the timezone is critical for handling time-related calculations

Requirements

Here is a Google Calendar Video from frontend Enginner

• Video

• Diagram

Networking

• HTTP1

• HTTP2

• GraphQL

• Pulling/Long, Polling/REST API

• Web Sockets

• SSE - Server Side Events

Here is how Rise Events looks Like

get all events preview

Amie uses Graphql

Graphql get request to get all Events

Google Calendar Clone

timelayout.vercel.app