Подтвердить что ты не робот

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

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

Это не показано на этой картинке, но притворяется там столбом с часами (с 8 утра до 11 вечера или около того) слева от 25-го. Если событие начинается с.. скажем, 1pm, я бы хотел, чтобы он показывался где-то посередине страницы. Если событие начинается в 8:30, оно должно отображаться между 8:00 и 9:00.

events

Думаю, я мог бы сделать это со столами, но мне было интересно, есть ли другой способ. Является ли это выполнимым с простым html/css, возможно, с Javascript? Любые предложения о том, каким лучшим способом было бы достичь этого? Если я использую таблицу, я все еще не уверен, что было бы лучшим способом сделать это. Камеру каждые тридцать минут? У меня есть доступ к началу и концу каждого события из моего представления. Массив событий (в этом примере, 25-й) выглядит следующим образом:

Array

[1] => Array
    (
        [title] => Ethiek
        [description] => Ethiek: Opdracht 1
        [time_start] => 11:30:00
        [time_end] => 12:00:00
    )

[2] => Array
    (
        [title] => Project Management
        [description] => Test: Project Management
        [time_start] => 15:00:00
        [time_end] => 16:00:00
    )

[event_count] => 2

Я ценю любые советы, которые вы можете мне дать. Большое спасибо!

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

UPDATE:

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

        foreach($details[0] as $key => $detail)
    {
        echo "<div class='grid'>";
        $header = "<p class='detail_header'>";
        $header .= ucfirst($dates[0][$key]['name']) . ", " . $key . " " . $init['curr_month_name'];
        $header .= "<img src='" . base_url() . "assets/images/create_event.png' alt='Plan iets'></p>";

        echo $header;

        for($i = 1; $i <= $details[0][$key]['event_count']; $i++)
        {
            echo "<div class='event " . $details[0][$key][$i]['type'] . "'>";
                echo "<p class='event_title'>" . $details[0][$key][$i]['title'] . "</p>";
                echo $details[0][$key][$i]['description'];
            echo "</div>";
        }
        echo "</div>";  

    }

Это немного беспорядок, не говоря уже о том, что у меня есть тот же код в другой раз, чтобы исправить некоторые исключения. Но что еще более важно. Я чувствую, что эти циклы не позволяют мне делать много изменений. Я попытался добавить два div для AM и PM, чтобы я мог разделить события в блоках до полудня и дня, а затем просто отображать время на событии (чтобы избежать необходимости работать с тысячами блоков по 15 минут). Но да.. Это не сработало, так как это положило бы пару дивизий "PM", если во второй половине дня было более одного события.

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

Любая помощь/предложения оценены. Спасибо.

4b9b3361

Ответ 1

Я тоже сейчас это делаю. Мое решение состояло в том, чтобы перейти с 960.gs-like divs.

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

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

Теперь, концепция 960.gs. Основой для сетки является знание, что у вас есть X объем пространства для отображения вашего контента... с 960, это 960 пикселей. Шахта более обычна, но это обеспечивает концепцию. Вы можете разделить это на несколько чисел, что становится основой для разделения сетки. Используя этот подход, я могу легко определить столбец из grid_1 в grid_4, и он примет ширину, которая является соразмерным процентом от общей ширины (т.е. На 16-ти столбце, где 4-разрядный div будет охватывать 25%). совместим с браузером и не требует открытого количества ясных div. Вам просто нужно добавить числа, чтобы они соответствовали количеству столбцов, с которыми вы хотите работать.

Теперь я начинаю с математики, чтобы выяснить, сколько раз каждый столбец представляет. Я собираю каждый день, используя цикл foreach: я начинаю с часа времени начала отображения и увеличиваю его. Если start_time события равно инкрементальному, я запускаю div, который был бы соответствующим образом основан на моих критериях окраски. Аналогично, если мое конечное время <= инкрементер, я останавливаю div и определяю ширину столбца в id. Очевидно, что в конце цикла я делаю инкремент ++. Повторяйте в день, который вы показываете.

Моя концепция делает это на основе времени для недельного календаря типов. Но общая идея может быть легко изменена для календаря в стиле месяца или даже для дневного календаря.

Таблицы определенно делают это проще (версия 1 была таблицей), но это можно сделать в любом случае, если у вас есть терпение.

Ответ 2

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

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

Ответ 3

Вы можете использовать подход 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

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

Ответ 4

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

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

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

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

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

});

Чтобы сделать это, вам нужно будет представлять свои события в JSON (Javascript Object Notation). Используя php, это легко с json_encode().

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

Ответ 5

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

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

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

Ответ 6

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

Теперь таблицы довольно сложны, поэтому прощайте грубость этого: 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 минут (общее время начала события - время начала события)

Спасибо. KJ