Конструирование динамически настроенного недельного календаря

Я создаю динамический гибкий недельный календарь, используя Twitter Bootstrap.

Здесь моя текущая реализация: http://jsfiddle.net/dvirazulay/Lhe7C/ (было немного длиннее, чтобы вставить здесь полностью)

И вот текущий скриншот:

То, что я пытаюсь достичь, - это дизайн, который будет полностью динамичным - генерация исходного представления из моего back-end не проблема, но немного сложна, так как моя текущая реализация использует таблицы. Я боюсь, что будет трудно поддерживать его на стороне JavaScript, т.е. Удалить события/добавить их на лету.

Очевидно, я выбрал таблицы, поскольку это имело смысл для меня - недельный календарь - это в основном таблица. Я опишу свой дизайн:

Событие может занимать более 30 минут, поэтому я использую rowspan, чтобы определить, сколько часов он должен охватывать.
Может быть два конфликтующих события (я не допускаю больше двух). Как и в настоящее время, они отображаются рядом друг с другом, каждый из которых занимает 50% от ширины события и занимает столько же высоты, сколько и должен представлять конечное время.
На внутренней стороне, я вычисляю, сколько td мне нужно пропустить, чтобы не иметь дополнительных столбцов в конце таблицы (поскольку rowspan подталкивает некоторые вправо)

Я задаю следующие вопросы:

Это правильный подход?
Должен ли я применять одну и ту же внутреннюю логику к интерфейсу и пересчитать сумму tr/td для отображения в соответствии с количеством событий, которые у меня есть, или есть лучшее решение для это?

В идеале, хороший ответ должен описывать, как обрабатывать события на стороне интерфейса без осложнений или альтернативный (отзывчивый!) дизайн для этой проблемы.

Я не хочу использовать существующий плагин, так как я искал и пробовал несколько из них, и я хочу, чтобы он был очень легким, но если у вас есть большое предложение для тех, кто выполняет требования - я бы люблю проверять! (jQuery недельный календарь слишком медленный и загроможден, например)

Примечание. Я не намерен поддерживать браузеры старше IE9.

Ответы

Ответ 1

После изучения проблем и консультаций с несколькими экспертами, я пришел к выводу, что сохранение его в виде таблиц - лучший вариант, даже если генерировать его не тривиально.

В то время как это решение затрудняет динамическое изменение расписания без повторной генерации всей таблицы, все преимущества элементов стиля, которые должны быть таблицей в качестве таблицы, выравниваются, ширины, высоты, границы и т.д. легко контролировать и работать с большим кросс-браузером.

Важно отметить, что этот подход делает гибкость графика тривиальным качеством.

Ответ 2

Использование таблицы - хороший подход.

Хорошо, это решение на основе jQuery для проблемы с "рядами". Происхождение проблемы - неправильная генерация таблицы в бэкэнд.

Например, если отображается td с rowspan = "3", то td в той же позиции индекса столбца в следующих двух строках будет затронута и сдвинута вправо. Это нежелательно.

<table border="1">
<tr>
    <td>07:30</td>
    <td rowspan="3">Event 07:30 to 09:00</td>
</tr>
<tr>
    <td>08:00</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>08:30</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>09:00</td>
    <td>C</td>
</tr>

Правильное решение - правильная генерация таблицы в бэкэнд. Рендеринг td после строки rowspan просто не произойдет. Если вы знаете, что вы создаете rowspan = "3", тогда действуйте соответствующим образом.:)

В любом случае, если невозможно изменить рендеринг таблицы, используйте jQuery для его исправления:

http://jsfiddle.net/9tQvu/3/

Ответ 3

Это вполне приемлемый способ сделать это.

Если бы я был вами, я бы, вероятно, использовал divs, потому что они более управляемы и проще в использовании CSS и являются более стандартными.

Кроме того, я думаю, что вы хорошо подходите, и вы, вероятно, должны сделать переднюю часть так же, как и заднюю часть, потому что знаете, что она работает.

Что касается обработки событий, я бы просто сортировал divs по типу с использованием классов, а затем использовал обработчики событий с типами событий, которые вы хотите использовать (я не знаю, что вы хотите, кроме клика, хотя) на этих соответствующих классах,

Ответ 4

что происходит, когда событие перекрывается только частично с другим, я имею в виду, что 2 перекрывающиеся события занимают 50% от witdh, но если один из них закончит раньше, а другой позже, тот, который продолжается, все это займет все ширину "следующей" строки или продолжить с 50% ширины? что произойдет, если событие A с 8:00 до 8:30, а событие B - с 8:00 до 18:00? должно быть хорошо, что событие B будет заполнять ширину до тех пор, пока не произойдет другое перекрывающееся событие... но я предполагаю, что это может быть немного сложнее. просто мысль. Счастливое кодирование, это действительно хороший проект.

Ответ 5

Использование CSS и divs вместо ячеек таблицы может быть более точным и, безусловно, будет легче рассчитать клиентскую сторону и сохранить отзывчивость. Здесь пример pseduo-CSS/JS для первого события:

.event:first-child {
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */
    position: absolute;
    top: `(10/24)*100`%; /* 41.7%, based on event start */
}

Ответ 6

dhtmlxScheduler - Календарь событий Ajax/JavaScript

dhtmlxScheduler - это календарь событий JavaScript, который позволяет вам добавить планировщик, похожий на Google, на веб-приложение или веб-сайт. Интуитивно понятный интерфейс перетаскивания позволяет конечным пользователям быстро управлять событиями и встречами в разных представлениях: День, Неделя, Месяц, Год, Повестка, Временная шкала и т.д. Очень легкий (около 20 Кб gzipped), очень настраиваемый и быстрый, dhtmlxScheduler обеспечивает быстрый способ добавления календаря событий на основе Ajax на веб-странице.