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

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

• Non-conflicting meetings

• Conflicting Meetings

• 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!