it-swarm.com.ru

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

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

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

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

enter image description here

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

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

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

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

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

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

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

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

18
Dvir Azulay

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

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

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

4
Dvir Azulay

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

Хорошо, это решение, основанное на 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's после прострела не должен произойти . Если вы знаете, что рендеринг rowspan = "3", то действуйте соответствующим образом. :)

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

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

1
Jens A. Koch

Использование CSS и div вместо ячеек таблицы может быть более точным и, безусловно, будет проще вычислять на стороне клиента и сохранять отзывчивость. Вот пример псевдо-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 */
}
0
Alastair

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

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

0
Ganesh Bora

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

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

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

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

0
maxhud

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

0
Matteo Bononi 'peorthyr'