HTML-markup für multi-Tag-Kalender-Ereignisse

Kalender != Tabellen

Kalender sind nicht semantisch Tabellen. Sie fühlen sich wie Tabellen, weil das ist, wie wir immer sehen, aber die Daten werden semantisch einer Tabelle, jede Zeile enthalten eine einzigartige Einrichtung, und Sie nicht. Im Kalender der Tag wird die Entität.

Die Verwirrung liegt in der Tatsache, dass wir auch die Gruppe Tage in Wochen. Menschen natürlich denke, ein Monat ist eine Sammlung von Wochen, aber es ist nicht, es ist eine Sammlung von Tagen. Ein Monat hat im Durchschnitt 4,3 Wochen. Eine Zeile in einer Tabelle nicht enthalten Teil einer Person oder mehrere Personen.

Zeile == Entität, Spalte == Eigenschaft

Vergleichen Sie es um, sagen wir, einen Warenkorb online. Die Artikel in Ihrem Warenkorb werden tabellarisch. Jeder Zeile stellt eine Art von Element in Ihren Warenkorb gelegt. Jeder Spalte ist entweder ein Eigenschaft des Elements (name, stock Anzahl, Preis) oder eine Summe (Anzahl, Gesamtbetrag) einer Immobilie. Sie sehen nie zwei verschiedene Element-Typen in einer einzigen Zeile (da würde es keinen Sinn machen) und ein Wagen kann nicht enthalten, 4.3 Zeilen.

Eine Lösung

Für diese demo, die ich verwendet <divs> man für jeden Tag einstellen, um display: inline-block, aber Sie werden wahrscheinlich möchten ein <ol>. Tage fließen auch beim Wechsel zwischen Monat/Woche/Tag-Ansichten (nicht möglich mit Tabellen). Für mehrtägige Veranstaltungen, Javascript kann das layout.

Demo: http://jsfiddle.net/ThinkingStiff/XXm8y/

Ausgabe:

Skript:

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