Пользовательский календарь с событиями
Я работаю над системой событий, которая в основном представляет собой контейнер с высотой 720 пикселей, каждый пиксель представляет одну минуту с 9:00 до 21:00 и шириной 620 пикселей (отступы 10 пикселей слева и справа).
Естественным требованием для календарной системы является то, что:
The objects should be laid out so that they do not visually overlap. If there is one event in a time slot, its width will be 600px Every colliding event must be the same width as every other event that it collides width. An event should use the maximum width possible while still adhering to the first constraint.На входе будет массив что-то вроде:
<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>
Я создал нужный макет, но я застрял с частью JavaScript :( Это то, что я до сих пор:
<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>
Необходимо создать элементы div и расположить их в соответствии с вышеуказанными требованиями.
Пожалуйста, смотрите демо JSBin.
Любая помощь будет оценена.