Разработка динамического адаптивного недельного календаря

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

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

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

enter image description here

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

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

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

Мои вопросы следующие:

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

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

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

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

18
задан Dvir Azulay 30 June 2012 в 00:39
поделиться