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

Разметка HTML для многодневных событий календаря

Я знаком с стандартным подходом, основанным на colspan, для отображения календарей (нескольких недель или месяцев) в HTML с событиями, которые охватывают несколько дней. (Google Calendar делает это, как один из многих примеров.)

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

Вот пример гибкого, без таблиц календаря. (Однако нет многодневных событий.) https://pittsburghkids.org/calendar В своей версии с малым визитом он больше не является семантически. Точно так же, как @ThinkingStiff упоминает ниже, если вы переключаетесь с "просмотра месяца" на "просмотр списка" на стороне клиента, таблица также не подходит семантически.

4b9b3361

ОТВЕТЫ

Ответ 1

Календари!= Таблицы

Календари не являются семантическими таблицами. Они чувствуют себя как таблицы, потому что именно так мы их всегда видим, но для данных, которые должны быть семантически табличными, каждая строка должна содержать уникальный объект, а они нет. В календаре день - это сущность.

Путаница заключается в том, что мы также группируем дни в недели. Люди, естественно, думают, что месяц - это коллекция недель, но это не так, это коллекция дней. Месяц в среднем составляет 4,3 недели. Строка в таблице не может содержать часть объекта или нескольких объектов.

Строка == Объект, Столбец == Свойство

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

Решение

Для этой демонстрации я использовал <divs>, по одному для каждого дня, установленного на display: inline-block, но вы, вероятно, захотите использовать <ol>. Дни хорошо меняются при изменении между месяцами/неделями/днями (невозможно с таблицами). Для многодневных событий Javascript может выполнять макет.

Демо: http://jsfiddle.net/ThinkingStiff/XXm8y/

Вывод:

enter image description here

Script:

var events = [{ from: 3, to: 9 }, { from: 4, to: 4 }, { from: 9, to: 11 },{ from: 4, to: 12 }];

for( var eventIndex = 0, event; event = events[eventIndex], eventIndex < events.length; eventIndex++ ) {
    for( var dayIndex = event.from; dayIndex <= event.to; dayIndex++ ) {
        var dayElement = document.getElementById( 'day' + dayIndex ),
            firstDay = document.getElementsByClassName( 'event' + eventIndex ),
            top;
        if( firstDay.length ) {
            top = firstDay[0].style.top;
        } else {
            var eventCount = dayElement.getElementsByClassName( 'event' ).length;
            top = ( eventCount * 20 ) + 'px';
        };
        var html = '<div '
            + 'class="event event' + eventIndex + '" '
            + 'style="top: ' + top + ';">' 
            + eventIndex
            + '</div>';
        dayElement.insertAdjacentHTML( 'beforeEnd', html );
    };        
};
​

CSS

#calendar {
    border: 1px solid black;
    height: 400px;
    width: 504px;    
}
.day {
    display: inline-block;
    height: 80px;
    position: relative;
    vertical-align: top;
    width: 72px;   
}
.day:nth-child( even ) {
    background-color: pink;
}
.day:nth-child( odd ) {
    background-color: lightblue;
}
.event {
    background-color: lightgrey;
    height: 20px;   
    position: absolute;
    text-align: center;
    width: 100%;
}

HTML:

<div id="calendar">
    <div id="day1" class="day"></div><div id="day2" class="day"></div><div id="day3" class="day"></div><div id="day4" class="day"></div><div id="day5" class="day"></div><div id="day6" class="day"></div><div id="day7" class="day"></div><div id="day8" class="day"></div><div id="day9" class="day"></div><div id="day10" class="day"></div><div id="day11" class="day"></div><div id="day12" class="day"></div><div id="day13" class="day"></div><div id="day14" class="day"></div><div id="day15" class="day"></div><div id="day16" class="day"></div><div id="day17" class="day"></div><div id="day18" class="day"></div><div id="day19" class="day"></div><div id="day20" class="day"></div><div id="day21" class="day"></div><div id="day22" class="day"></div><div id="day23" class="day"></div><div id="day24" class="day"></div><div id="day25" class="day"></div><div id="day26" class="day"></div><div id="day27" class="day"></div><div id="day28" class="day"></div><div id="day29" class="day"></div><div id="day30" class="day"></div><div id="day31" class="day"></div>
</div>​