Estoy creando un calendario de eventos y estoy atascado agrupando eventos de un solo día en eventos de varios días. Cada día es un div y puedo construir un calendario mensual sin problema. El problema es principalmente cuando los eventos de varios días se superponen y uno rompe la línea. La línea azul superior es continua, amarilla hasta el 6, roja hasta el 7.

He buscado 'apilamiento de contenedores' y muchos otros enfoques, pero parece que no puedo encontrar lo que parece adecuado. Parte del problema son mis limitaciones matemáticas y los algoritmos encontrados terminan dejándome aturdido. Mi concepto actual (no matemático) es construir una matriz de matrices; 'número de días en el mes' de ancho por 'número máximo esperado de eventos alto '.
Aproximadamente como:

 xxxxxx... xxx // say 31 days xxxxxx... xxx ... +6 xxxxxx... xxx xxxxxx... xxx // say max 10 events in any day.

Un poco de pseudocódigo...
Ejecute array[0] para blueEv > es [0][4]=='x' && [0][5]=='x' && [0][6]=='x' = sí, luego coloque en.
para yellowEv > es [0][4]=='x' && [0][5]=='x' = no - entonces
es [1][4]=='x' && [1][5]=='x' = sí - entonces hazlo
redEv... [0] malo [1/] malo y [2] encaja
y así sucesivamente a través de eventos distribuidos y luego colocar sencillos en las ranuras 'x' restantes
elimine las 'x' y las matrices vacías al final y... bueno, funciona, pero sospecho que hay una forma mucho más elegante de hacerlo.

Señalar cualquier algoritmo o función existente o algo así sería genial. Puedo codificar bastante bien, por lo que, en ausencia de un código existente conocido, un esquema de enfoque sería genial. Solo estoy redondeando la vista de lista (pan comido :) y preparando mis lomos para la vista mensual.
P. ¿Por qué no uso una calibración existente? Ciertamente hay un montón. A. Aprendizaje + diversión.

Gracias.