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:
[
{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
]
Stworzyłem potrzebny układ, ale utknąłem z częścią JavaScript :( To, co mam do tej pory:
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,
}
}();
Musisz utworzyć div i ustawić je zgodnie z powyższymi wymaganiami.
Każda pomoc zostanie bardzo doceniona.