Niestandardowy kalendarz z divy zdarzeń

Pracuję nad systemem zdarzeń, który jest zasadniczo kontenerem o wysokości 720px z każdym pikselem reprezentującym jedną minutę od 9AM do 9PM i ma szerokość 620px (wypełnienie 10px od lewej i prawej)

Naturalnym wymogiem dla systemu kalendarza jest to, że:

Przedmioty powinny być ułożone tak, aby nie nakładały się wizualnie.Jeśli w przedziale czasowym jest jedno wydarzenie, jego szerokość wynosi 600 pikseliKażde zderzające się zdarzenie musi mieć taką samą szerokość, jak każde inne zdarzenie, które koliduje z szerokością.Zdarzenie powinno wykorzystywać maksymalną możliwą szerokość, przy jednoczesnym przestrzeganiu pierwszego ograniczenia.

Wejście będzie tablicą podobną do:

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

Stworzyłem potrzebny układ, ale utknąłem z częścią JavaScript :( To, co mam do tej pory:

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

Musisz utworzyć div i ustawić je zgodnie z powyższymi wymaganiami.

Zobacz demo JSBin.

Każda pomoc zostanie bardzo doceniona.

questionAnswers(6)

yourAnswerToTheQuestion