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.
Każda pomoc zostanie bardzo doceniona.