11

私は、複数日にまたがるイベントを HTML で (複数週または月単位のビューで) カレンダーを表示するための標準的な colspan ベースのアプローチに精通しています。(多くの例の 1 つとして、Google カレンダーがこれを行います。)

同じことを達成するためのテーブルレスアプローチを誰かが知っているかどうか、私は興味があります。重要ではないだけかもしれませんが、これは table 要素の「良い」使い方ですが、このレスポンシブ デザインの時代にはもっと関連性があるのではないかと思います。

レスポンシブで表のないカレンダーの例を次に示します。(ただし、複数日のイベントはありません。) https://pittsburghkids.org/calendar小さなビューポート バージョンでは、意味的にテーブルではなくなりました。同様に、@ThinkingStiff が以下で言及しているように、クライアント側で「月ビュー」から「リスト ビュー」に切り替える場合、テーブルも意味的に適合しません。

4

1 に答える 1

14

カレンダー != テーブル

カレンダーは意味的にテーブルではありません。テーブルはテーブルのように見えますが、これはテーブルのように見えますが、データが意味的に表形式であるためには、各行に一意のエンティティが含まれている必要がありますが、そうではありません。カレンダーでは、日がエンティティです。

混乱は、日を週にグループ化することにもあります。ひと月は週の集まりだと思いがちですが、そうではなく、日の集まりです。1 か月は平均 4.3 週間です。テーブル内の行に、エンティティの一部または複数のエンティティを含めることはできません。

行 == エンティティ、列 == プロパティ

たとえば、オンラインのショッピングカートと比較してください。カート内のアイテムは表形式です。各行は、カート内の 1 つのタイプのアイテムを表します。各列は、アイテムのプロパティ(名前、在庫数、価格) またはプロパティの集計 (数量、合計金額) のいずれかです。1 つの行に 2 つの異なるアイテム タイプが表示されることはなく (意味がないため)、カートに 4.3 行を含めることはできません。

解決策

私が使用したこのデモでは<divs>、毎日 1 つを に設定しまし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%;
}

</p>

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>​
于 2012-07-11T21:14:47.140 に答える