Visualización de eventos del calendario. Algoritmo para diseñar eventos con ancho máximo.

Necesito su ayuda con un algoritmo (se desarrollará en el lado del cliente con javascript, pero en realidad no importa, estoy más interesado en el algoritmo en sí mismo) para organizar los eventos del calendario de modo que cada cuadro de evento tenga el ancho máximo. Por favor vea la siguiente imagen:

El eje Y es el tiempo. Así que si "Evento de prueba" comienza al mediodía (por ejemplo) y nada más se cruza con él, toma todo el ancho del 100%. "Revisión semanal" se cruza con "Tumbling YMCA" y "Anna / Amelia", pero las dos últimas no se intersectan, por lo que todas se llenan el 50%. Test3, Test4 y Test5 se intersecan, por lo que el ancho máximo es de 33.3% para cada uno. Pero Test7 tiene un 66% ya que Test3 tiene un 33% fijo (ver más arriba), por lo que ocupa todo el espacio disponible, que es un 66%.

Necesito un algoritmo para explicar esto.

Gracias por adelantado

Respuestas a la pregunta(2)

Su respuesta a la pregunta