PHP AJAX mysql календарь событий - интерфейс для событий, охватывающих несколько дней

Question

Я построил систему календарей PHP и почти все сделал, но не знаю, как справиться с проблемой пользовательского интерфейса, связанной с тем, как события растягиваются на пару дней.Я хочу быть в состоянии растянуть событие, которое растягивается на пару дней в div, который охватывает те дни в календаре.В основном, я хотел бы знать, как достичь того, чего достигли эти парни с событием, которое простирается с 21-го на 22-е с желтым фоном div .

Я пытался понять, как я могу это сделать с помощью PHP, но я чувствую, что, возможно, пытаюсь поступить неправильно.Возможно, это сделано с помощью JavaScript?

Answer 1

Действительно, чтобы объяснить, как это сделать, потребуется довольно много времени. Я могу дать вам несколько общих указаний, однако ...

По сути, в приведенном вами примере авторы этого календаря использовали абсолютно позиционированные элементы div, расположенные над календарем. Если вы откроете Firebug в Firefox и «осмотрите элемент» на одном из участков, а затем просмотрите элемент при изменении размера браузера, вы заметите, что он становится желтым. Это связано с тем, что JavaScript активно изменяет размеры элементов при добавлении элементов или при изменении размера страницы. Некоторое время я пытался сделать что-то похожее на это и в конце концов сдался из-за его сложности и излишней громоздкости.

Что я в итоге сделал, так это пошло против моего сильного анти-табличного менталитета и использовал атрибут colspan элементов <td> в самой таблице. Каждая строка событий - <tr>, а каждое событие - <td>. Поскольку <td> s может охватывать несколько «столбцов» с помощью атрибута colspan.

Итак, чтобы сломать его ...

Календарь <div>. Каждая неделя - это 100% -ная ширина <div>, которая содержит две таблицы:

1. Первая таблица просто содержит границы ячейки, чтобы придать календарю вид.
2. Второй содержит номера дня, события и т. Д. *

Во второй таблице первая строка имеет 7 столбцов (по 1 на каждый день недели). Все третичные строки имеют только количество строк, необходимое для отображения их событий. Таким образом, неделя с одним событием, скажем, в четверг, который охватывает 2 дня (с четверга по пятницу), будет иметь 6 столбцов:

Эта строка будет выглядеть примерно так:

<tr>
    <td class="no-event"></td> <!-- Sunday -->
    <td class="no-event"></td> <!-- Monday -->
    <td class="no-event"></td> <!-- Tuesday -->
    <td class="no-event"></td> <!-- Wednesday -->
    <td class="no-event" colspan="2">  <!-- Thursday through Friday -->
        <div class="some-styling-class">Vacation to Orlando!</div>
    </td>
    <td class="no-event"></td> <!-- Saturday -->
</tr>

Обратите внимание, что есть только 6 столбцов ... (поскольку событие с colspan="2" занимает 2 столбца).

Каждая таблица жестко расположена относительно родительского div 'week' ... первая имеет более низкий z-индекс, так что вторая таблица (события и т. Д.) Будет отображаться сверху и охватывать календарь границы ячейки.

Это именно то, что Google использует для создания своих календарей Google. На самом деле он довольно элегантный, с ним легко работать, и писать сумасшедший javascript практически невозможно. Самое сложное - это обернуть событие, скажем, с четверга на одну неделю, скажем, на среду на другой неделе (так как вам нужно сделать n количество colspans <td> в зависимости от суммы недель в видимом календарном пространстве).

Итак, на самом деле, я бы предложил исследовать структуру таблицы Google G-Cal и посмотреть, что из этого можно экстраполировать. Самый простой способ - просто скопировать весь HTML-код из него с помощью Firebug и вставить его в редактор, а затем просто поиграть, пока не поймете, как он работает.

Надеюсь, то, что я показал, поможет. Удачи, чувак.

Answer 2

Google Calendar решает эту проблему, верьте или нет, с помощью таблиц. Это немного сложнее (у них есть одна таблица для календарной сетки, а затем наложена сверху еще одна таблица для событий внутри), но при базовом подходе вы будете использовать несколько строк для каждого календарного блока и помещать одно событие в строку за столбец. Затем, когда вы хотите растянуть событие на несколько дней, вы просто используете colspan в ячейке таблицы для этого конкретного события. Примерно так:

===============================
||   Monday   ||   Tuesday   ||
===============================
||   Evt 1    ||    Evt 2    ||    ...
-------------------------------
||   Evt 3 (colspan=2)       ||
-------------------------------
||            ||             ||
-------------------------------    ...
||            ||             ||
===============================
||   Monday   ||   Tuesday   ||
===============================

              ...

Где двойные линии представляют границы, которые вы фактически визуализируете, а одиночные линии представляют невидимые границы между строками. В этом примере у вас будет 4 строки на календарную сетку (так что вы можете иметь максимум 4 события в день).

Вы можете добиться всего этого из PHP за счет тщательного рендеринга HTML и использования CSS.

Что-то еще, что я бы порекомендовал, как сказал Майкл, изучать Календарь Google, но гораздо лучше, чем смотреть на код, было бы получить Firefox (у вас, надеюсь, он уже есть) и установить расширение Firebug (которое вы также, надеюсь, уже иметь). Затем перейдите в меню Firebug и выберите «Проверить элемент», нажмите на одно из событий в календаре и изучите структуру оттуда.

Answer 3

Проблема с использованием одного div, охватывающего несколько ячеек, заключается в том, что вы столкнетесь с переносами строк. Скажем, событие длится с четверга до вторника, но каждая неделя (начиная с понедельника) будет иметь свой собственный ряд.

Альтернативным решением будет использование нескольких элементов div и установка отдельного класса для первого и последнего дня события. Что-то вроде ...

<div class="event01 first">(text)</div>
<div class="event01"></div> <!-- repeat -->
<div class="event01 last"></div>

Конечно, обратной стороной этого является то, что описание будет ограничено первым div. Следовательно, комбинация из двух, вероятно, будет работать лучше; один div, охватывающий начало и конец недели, а второй (и, возможно, третий и т. д.) до даты окончания события.

Или, в случае таблиц, вы, конечно, можете объединить ответ Текахера:

<td class="event01 first last">1-day event</td>

<td class="event01 first">Multi-day event</td>
<td class="event01"></td>
<td class="event01 last"></td>

В обоих примерах класс "event01" устанавливает границы фона и верхней / нижней границы, а классы "first" и "last" устанавливают левую и правую границы соответственно. (По умолчанию это будет 0).