I'm creating a calendar web application using React (HTML/CSS/JS). I'm trying to figure out how to place events into the calendar in a way that automatically stacks them vertically and horizontally based on their start and end times. Microsoft teams does this in their calendar. I've provided an image here of what the layout should look like.

I've tried using flexbox and tried positioning them absolutely based on calculated overlaps and offsets. No luck. Any help would be appreciated!

Thanks!

EDIT: I'm looking for help with the algorithm to do this. Im not looking for specific code.

I have an array of events

[
{start: datetime, end: datetime},
{start: datetime, end: datetime},
...
]

I've created a function that returns a 2x2 matrix of "colisions" between events. E.x. for the pic posted above:

I feel like from this I should be able to determine the width of each event (100%, 50%, 33.3%, etc). and the offset from the left of the page (i.e. column 1, coulmn 2. etc)