I am building a calendar component with react and javascript, but I am having problems on how to correctly position events on the week view. Every day of the week is a div (position:relative) in which I can place multiple div (position:absoulte) which are my events. To position the events I set top, height, left and width of the divs, no problems on setting top and height, but to set left and width I really have no clue on how to do it correctly to have a result like outlook calendar.

For now I came up with this: https://postimg.cc/jC9S9LyB

But what I am aiming for is this: https://postimg.cc/G99pqkTk

The 2 days marked as "test" should look the same, but as you can see I am struggling to find a way to correctly position overlapping events.

For each day I have an array with all the events of that day, here I can set all the parameters I need to position the events, then I render all the events.

Any idea on how to calculate left and width of the events to postion them correctly?