Estoy creando una aplicación web de calendario usando React (HTML/CSS/JS). Estoy tratando de descubrir cómo colocar eventos en el calendario de una manera que los apila automáticamente vertical y horizontalmente en función de sus horas de inicio y finalización. Los equipos de Microsoft hacen esto en su calendario. He proporcionado una imagen aquí de cómo debería verse el diseño.

Intenté usar flexbox e intenté posicionarlos absolutamente en función de las superposiciones y compensaciones calculadas. Sin suerte. ¡Cualquier ayuda sería apreciada!

¡Gracias!

EDITAR: estoy buscando ayuda con el algoritmo para hacer esto. No estoy buscando un código específico.

Tengo una serie de eventos.

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

Creé una función que devuelve una matriz de 2x2 de "colisiones" entre eventos. Ex para la foto publicada arriba:

Siento que a partir de esto debería poder determinar el ancho de cada evento (100%, 50%, 33.3%, etc.). y el desplazamiento desde la izquierda de la página (es decir, columna 1, columna 2, etc.)