多日日历活动的HTML标记 [英] HTML markup for multi-day calendar events

问题描述

我熟悉标准的基于colspan的方法，用于在HTML中显示（多周或月视图）日历，其中事件跨越多天。 （Google日历就是其中的一个例子。）

I'm familiar with the standard colspan-based approach for displaying (multiweek or month view) calendars in HTML with events that span multiple days. (Google Calendar does this, as one of many examples.)

我很好奇，如果有人知道一个无桌面的方法来实现同样的事情。也许这只是不重要，这是一个好的表元素的使用，但我认为这可能更适合这个响应式设计时代。

I'm curious if anyone knows of a table-less approach to achieve the same thing. Maybe it's just not important, and this is a "good" use of the table element, but I think it might be more relevant in this era of responsive design.

这里一个响应无表的日历的例子。 （虽然没有多天活动。） https://pittsburghkids.org/calendar 在其小视口版本，它不再是一个表，语义。类似地，如下面@ThinkingStiff所说，如果你在客户端从月视图切换到列表视图，一个表实际上也不适合语义。

Here's an example of a responsive, table-less calendar. (No multi-day events, though.) https://pittsburghkids.org/calendar In its small-viewport version, it's no longer a table, semantically. Similarly, as @ThinkingStiff mentions below, if you're switching from "month view" to "list view" on the client side, a table doesn't really fit semantically either.

推荐答案

日历！=表

日历不是语义表。他们感觉像表，因为这是我们总是看到它们，但是为了数据在语义上表格，每行将必须包含一个唯一的实体，而他们不。在日历中， 日是实体。

Calendars != Tables

Calendars are not semantically tables. They feel like tables because that is how we always see them, but for the data to be semantically tabular, each row would have to contain a unique entity, and they don't. In calendars the day is the entity.

混乱的地方在于， 。人们自然认为一个月是一个周的集合，但它不是，它是一个天的集合。一个月平均有4.3个星期。表格中的一行不能包含实体的部分或多个实体。

The confusion lies in the fact that we also group days into weeks. People naturally think a month is a collection of weeks, but it is not, it's a collection of days. A month has, on average, 4.3 weeks. A row in a table can't contain part of an entity or multiple entities.

与网上购物车比较。您的购物车中的项目是表格。每个行表示您购物车中的一种商品类型。每个列都是项目（名称，股票编号，价格）的属性或属性的汇总（数量，总金额）。您在一行中看不到两种不同的项目类型（因为它们没有意义），并且购物车不能包含4.3行。

Compare it to, say, a shopping cart online. The items in your cart are tabular. Each row represents one type of item in your cart. Each column is either a property of the item (name, stock number, price) or an aggregate (quantity, total amount) of a property. You never see two different item types in a single row (because it wouldn't make sense) and a cart can't contain 4.3 rows.

对于这个演示，我使用< divs> ，每一天设置为 display：inline -block ，但您可能需要使用< ol> 。在月/周/天视图（在表格中不可能）之间更改时，天数很好。对于多天活动，Javascript可以进行布局。

For this demo I used <divs>, one for each day set to display: inline-block, but you'll probably want to use an <ol>. Days flow well when changing between month/week/day views (not possible with tables). For multi-day events, Javascript can do the layout.

演示： 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：

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%;
}

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

这篇关于多日日历活动的HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！