Build A Mini Clone Of Google Calendar | Frontend Coding Challenge | JavaScript Interview Questions | DevKode DOM Challenge
@Yomesh Gupta

HTML/CSS/JavaScriptReactAll Levels
809
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this question, we have to create the functionality of a day calendar. This is somewhat similar to what see in solutions like Google Calendar.

  • Implement a Calendar, that shows the events for a single day.
  • The events list is provided as an array of objects where each object has a title, start time, end time, and color code.
  • The calendar should have 12 hours display. (AM - PM format)
  • Handle the events clashes gracefully to display all the conflicting events.
  • Display the Title and Timings on the event block
  • As the challenge is UI-centric, prioritize the display of events and clash management.

Assumptions:

  • The events in the array can be in any random order.
  • Event's end time will always be higher than the start time with a non zero duration.

Mockups

Day Calendar Demo

  • Non-conflicting meetings

Non-conflicting meetings

  • Conflicting Meetings

Conflicting Meetings

  • Interaction

Interaction

This is an interesting question that can have multiple levels.

For SDE 1, show the UI for non-overlapping meetings. For SDE 2+, show the UI for over-lapping meetings too.

Data

  • Non-conflicting data
[
    {
      startTime: "00:00",
      endTime: "01:30",
      color: "#f6be23",
      title: "#TeamDevkode",
    },
    {
      startTime: "4:30",
      endTime: "7:30",
      color: "#f6501e",
      title: "#TeamDevkode",
    },
    {
      startTime: "12:00",
      endTime: "13:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "9:00",
      endTime: "10:00",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "16:00",
      endTime: "19:00",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "20:30",
      endTime: "22:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
  ]
  • Conflicting data
[
    {
      startTime: "00:00",
      endTime: "01:30",
      color: "#f6be23",
      title: "#TeamDevkode",
    },
    {
      startTime: "3:30",
      endTime: "7:30",
      color: "#f6501e",
      title: "#TeamDevkode",
    },
    {
      startTime: "4:30",
      endTime: "8:30",
      color: "#f6501e",
      title: "#TeamDevkode",
    },
    {
      startTime: "6:30",
      endTime: "9:00",
      color: "#f6501e",
      title: "Demo",
    },
    {
      startTime: "11:00",
      endTime: "13:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "12:00",
      endTime: "13:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "9:30",
      endTime: "10:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "16:00",
      endTime: "17:00",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "15:00",
      endTime: "17:00",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "18:00",
      endTime: "19:00",
      color: "#f6501e",
      title: "#TeamDevkode",
    },
    {
      startTime: "20:30",
      endTime: "22:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
    {
      startTime: "20:30",
      endTime: "22:30",
      color: "#029be5",
      title: "#TeamDevkode",
    },
  ]

Submission

Please start the timer before starting and finish your solution within 120 mins. Share your solution with us on Twitter or LinkedIn.

Checkout original post here. Credits to DevKode team for this amazing question!