HTML标记多天的日历事件(HTML markup for multi-day calendar e

我很熟悉的HTML显示（multiweek或月视图）日历与跨越多天的事件标准的基于合并单元格的方法。（谷歌日历这样做，因为这样的例子很多。）

我很好奇，如果任何一台少的方式来实现同样的事情知道。也许这只是并不重要，这是一个“好”使用该表的元素，但我认为这可能是在这个时代的响应式设计的更有意义。

这里有一个反应灵敏，表少日历的一个例子。（无多天的事件，虽然）。 https://pittsburghkids.org/calendar在它的小视窗版本，它不再是一个表，语义。同样，作为@ThinkingStiff提到下面，如果你从“月视图”在客户端“列表视图”开关，表没有真正适合语义无论是。

日历！=表

日历语义不表。他们觉得自己的表，因为这是我们总是看到他们，但对于数据在语义上的表格，每一行必须包含一个唯一的实体，而他们没有。在日历当天是实体 。

混乱之处在于，我们还组天进周。人们自然就想到一个月星期的集合，但它不是，它是天的集合。一个月的时间，平均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>