Dynamically manage overlapping element visibility like Google Calendar

I am currently building a Google Calendar clone app in Reactjs, so far it is working fine.

I reached the final stage of this project I started thinking on how to make overlapping elements visible.

This scenario applies to events in the calendar for one or multiple users.

Each column is an array of timestamps.

let day = [1,2,3,4,5,6,7,8,9]

I am able to get the range for each array like so:

let event1 = [2,3,4,5]
let event2 = [3,4]
let event3 = [3]
let event4 = [3]
let event5 = [6,7]
let event6 = [5,6]

Is there a method I could use to approach this or a custom library?