多日历事件的HTML标记

Question

我熟悉基于标准colspan的方法,用于在HTML中显示(多周或月视图)日历,其中包含跨越多天的事件.(谷歌日历这样做,作为众多例子中的一个.)

我很好奇,如果有人知道无表格的方法来实现同样的事情.也许它并不重要,这是对表元素的"好"用法,但我认为在这个响应式设计时代它可能更有意义.

以下是响应式无表日历的示例.(但是没有多日活动.)https://pittsburghkids.org/calendar在它的小视口版本中,它不再是一个表,在语义上.类似地,正如@ThinkingStiff在下面提到的那样,如果你在客户端从"月视图"切换到"列表视图",那么表格在语义上也不合适.

Answer 1

日历!=表格

日历不是语义表.他们感觉像表,因为这是我们总是看到它们的方式,但是对于数据在语义上是表格的,每行必须包含一个唯一的实体,而它们不包含.在日历中,这一天是实体.

令人困惑的是,我们还将数天分为几周.人们自然认为一个月是一个星期的集合,但它不是,它是一个集合的天.一个月平均为4.3周.表中的行不能包含实体的一部分或多个实体.

行==实体,列==属性

比较一下,比如在线购物车.购物车中的商品是表格式的.每行代表购物车中的一种商品.每列都是项目的属性(名称,库存号,价格)或属性的聚合(数量,总量).您永远不会在一行中看到两种不同的项目类型(因为它没有意义)并且购物车不能包含4.3行.

一个办法

对于我使用的这个演示<divs>,每天设置一个display: inline-block,但你可能想要使用<ol>.在月/周/日视图之间切换时天数很好(表格不可能).对于多日活动,Javascript可以进行布局.

演示: http ://jsfiddle.net/ThinkingStiff/XXm8y/

输出:

脚本:

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>?