Форматирование событий в соответствии со временем начала

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

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

Вы могли бы использовать подход css и абсолютное позиционирование записей вашего календаря. Затем вам понадобится класс css для каждого временного интервала. Просто чтобы дать некоторую ориентацию:

.timeslot_0 {
 position: absolute;
 top: 0px;
}
.timeslot_1 {
 position: absolute;
 top: 50px;
}
.timeslot_2 {
 position: absolute;
 top: 100px;
}

<div id="calendar">
   <div class="day">
     <div class="entry timeslot_0>Schedule Enty</div>
     <div class="entry timeslot_2>Schedule Enty</div>
   </day>
   <div class="day">
     <div class="entry timeslot_1>Schedule Enty</div>
   </day>
   <div class="day"></day>
   <div class="day"></day>
   <div class="day"></day>
</div>

Это та же идея, что и bedind 960grid

В качестве альтернативы вы могли бы использовать процент для позиции сверху, чтобы в 8 утра было 8%, а в 6 вечера - 100%. Это немного сложно в зависимости от доступного размера и прочего, но может сработать. Я еще не пробовал. Просто застрял у меня в голове, как еще одна возможность.

Я бы посоветовал не использовать таблицы, а использовать Javascript и CSS.

1. Используйте Javascript, чтобы получить ширину фона календаря: например, 800 пикселей.
2. Разделите эту ширину, чтобы разместить 30-минутные слоты в течение 24 часов; 800 / (24 * 2) = 16 пиксели
   • 24 * 2 (48) это количество 30-минутных слотов за 24 часа.
   • 16 пикселей - это то, сколько места у вас есть за 30 минут.
3. Для каждого события, которое у вас есть, возьмите время начала в блоках по 30 минут и умножьте его на 16 пикселей, чтобы получить его положение с левой стороны.
   • Для события, которое начинается в 2:30 (блоки 5x30 минут), 5*16 = 80 пикселей слева
   • Для события, которое начинается в 12:00 (блоки 24x30 минут), 24 *16 = 384 пикселя слева
   • Для события, которое начинается в 14:30 (блоки 29x30 минут), 29*16 = 464 пикселя слева

Я предлагаю самый простой способ реализовать это с помощью jQuery;

var usableWidth = $('div.calendar').width();

eventsCollection.each(function(singleEvent) {
    $(singleEvent).width = (getStartTimeInMinutes(singleEvent) / 30) * (24 * 2); 

});

Для этого вам потребуется представить свои события в формате JSON (нотация объектов Javascript). Используя php, это легко сделать с помощью json_encode().

Этот метод может быть немного сложным для понимания на первый взгляд, но он сохраняет вашу разметку (HTML) очень чистой и очень хорошо работает с экраном любого размера. Самое главное, поскольку ваши события будут представлены в виде объектов Javascript, это даст вам действительно отличную отправную точку для создания действительно богатого приложения Ajax.

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

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

Кстати, введите URL-адрес работающей версии для нас, когда закончите.

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

Теперь таблицы довольно жесткие, так что простите за грубость этого: P

-------------------------------------------------------------------------------------------
                 hrs | mins |total mins|        
day start time | 10  |  0   |600       |running time in mins        
day end time   | 23  | 30   |1410      |810     
item start time| 13  |  0   |780       |running time | distance to cover | starting point
item end time  | 16  | 40   |1000      |220          | 27.16%            | 180
-------------------------------------------------------------------------------------------

Если вы посмотрите на вышесказанное. У меня есть день со временем начала или окончания. Это может быть преобразовано в любой формат времени, который вам нужен, в неделю, месяц, в любом случае. Дело в том, что вы можете просмотреть все свои товары и найти самую раннюю дату начала и самое позднее время окончания, рассчитав 100% расстояния до вашего события (для меня 810 минут).

Отсюда вы можете рассчитать % баллов, которые человеку даже необходимо покрыть (время выполнения одного события/общее время выполнения события *100). Это будет расстояние для рисования этого отдельного элемента.

И дайте этому элементу отправную точку (это также должно быть процентное значение), но отправная точка для события один 180 минут (общее время начала события - время начала события элемента)

Спасибо. КДЖ