Estou trabalhando em um sistema de eventos que é basicamente um contêiner com 720px de altura, com cada pixel representando um minuto das 9h às 21h e tem largura de 620px (preenchimento de 10px da esquerda e da direita)

O requisito natural para o sistema de calendário é que:

Os objetos devem ser dispostos de forma que eles não se sobreponham visualmente.Se houver um evento em um intervalo de tempo, sua largura será de 600 pxCada evento de colisão deve ter a mesma largura que qualquer outro evento que colide com largura.Um evento deve usar a largura máxima possível enquanto ainda adere à primeira restrição.

A entrada será uma matriz 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>

Eu criei o layout necessário, mas eu estou preso com parte JavaScript :( Isso é o que eu tenho até agora:

<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>

Precisa criar divs e posicioná-los conforme os requisitos acima.

Por favor, veja a demonstração do JSBin.

Qualquer ajuda será muito apreciada.