Estoy trabajando en un sistema de eventos que es básicamente un contenedor con una altura de 720 px con cada píxel que representa un minuto de 9 a.m. a 9 p.m. y tiene un ancho de 620 px (relleno de 10 px de izquierda a derecha)

El requisito natural para el sistema de calendario es que:

Los objetos deben estar dispuestos de manera que no se superpongan visualmente.Si hay un evento en un intervalo de tiempo, su ancho será de 600 pxCada evento de colisión debe tener el mismo ancho que cualquier otro evento que colisiona de ancho.Un evento debe usar el ancho máximo posible sin dejar de adherirse a la primera restricción.

La entrada será una matriz algo como:

<code>[
 {id : 1, start : 30, end : 150},  // an event from 9:30am to 11:30am
 {id : 2, start : 540, end : 600}, // an event from 6pm to 7pm
 {id : 3, start : 560, end : 620}, // an event from 6:20pm to 7:20pm
 {id : 4, start : 610, end : 670} // an event from 7:10pm to 8:10pm
]
</code>

He creado el diseño necesario pero estoy atascado con la parte de JavaScript :( Esto es lo que tengo hasta ahora:

<code>var Calendar = function() {

   var layOutDay = function(events) {
     var eventsLength = events.length;

     if (! eventsLength) return false;

     // sort events
     events.sort(function(a, b){return a.start - b.start;});

     for (var i = 0; i < eventsLength; i++) {
         // not sure what is next
     }         

   };

   return {
       layOutDay : layOutDay,
   }

}();
</code>

Necesidad de crear divs y posicionarlos según los requisitos anteriores.

Por favor vea la demo de JSBin.

Cualquier ayuda será apreciada.