HM Invent Coding Challenge

Manually events task


Given a set of events, each with a start time and end time, render the events on a single day calendar (similar to Outlook,, and Google Calendar). There are several properties of the layout:

No events may visually overlap.

  • If two events collide in time, they MUST have the same width. This is an invariant. Call this width W
  • W should be the maximum value possible without breaking the previous invariant.
  • Each event is represented by a JavaScript object with a start and end attribute.
  • The value of these attributes is the number of minutes since 9am. So {start:30, end:90} represents an event from 9:30am to 10:30am.
  • The events should be rendered in a container that is 632px wide (600px + 16px padding on the left/right) and 720px long (the day will end at 9pm).
  • The styling of the events should match the attached screenshot.

Code Guidelines

Please use vue (preferred: vue3) with one page that consume events from attached Backend mock server:

  • GET http://localhost:3000/events
  • RES [ {start: 30, end: 150}, {start: 540, end: 600}, {start: 560, end: 620}, {start: 610, end: 670} ] You can run Mocked server using:
  • npm install
  • npm run start


  • Only vue is allowed to structure the app and scss for styles.
  • Using libraries that handle events is not allowed. Please provide a solution from scratch.
  • Assume that 100 is the maximum number of events that can be rendered.
  • Assume that data of events are valid. So no need to guard against invalid data.
  • Solution needs to match the attached screenshot pixel perfectly.
  • Solution should be submitted via git. Please create a private repo and share it with us.
  • Please don’t share with your colleagues and friends as w


My Image


View Github