Marcado HTML para eventos de calendario de varios días

Estoy familiarizado con el enfoque estándar basado en colspan para mostrar calendarios (varias semanas o meses) en HTML con eventos que abarcan varios días. (Google Calendar hace esto, como uno de los muchos ejemplos).

Tengo curiosidad si alguien sabe de un enfoque sin tablas para lograr lo mismo. Tal vez simplemente no sea importante, y este es un “buen” uso del elemento de tabla, pero creo que podría ser más relevante en esta era de diseño receptivo.

Aquí hay un ejemplo de un calendario receptivo y sin tablas. (Sin eventos de varios días, sin embargo). Https://pittsburghkids.org/calendar En su versión de pequeña ventana, ya no es una tabla, semánticamente. Del mismo modo, como @ThinkingStiff menciona a continuación, si está cambiando de “vista de mes” a “vista de lista” en el lado del cliente, tampoco una tabla realmente cabe semánticamente.

Calendarios! = Tablas

Los calendarios no son semánticamente tablas. Se sienten como tablas porque así es como siempre las vemos, pero para que los datos sean semánticamente tabulares, cada fila debería contener una entidad única, y no es así. En los calendarios, el día es la entidad .

La confusión radica en el hecho de que también agrupamos los días en semanas. La gente naturalmente piensa que un mes es una colección de semanas, pero no lo es, es una colección de días. Un mes tiene, en promedio, 4.3 semanas. Una fila en una tabla no puede contener parte de una entidad o entidades múltiples .

Fila == Entidad, Columna == Propiedad

Compáralo con, digamos, un carrito de compras en línea. Los artículos en su carrito son tabulares. Cada fila representa un tipo de artículo en su carrito. Cada columna es una propiedad del artículo (nombre, número de inventario, precio) o un agregado (cantidad, cantidad total) de una propiedad. Nunca verá dos tipos diferentes de elementos en una sola fila (porque no tendría sentido) y un carro no puede contener 4.3 filas.

Una solución

Para esta demostración, utilicé , uno para cada día configurado para display: inline-block , pero es probable que desee utilizar un

    . Los días fluyen bien al cambiar entre vistas de mes / semana / día (no es posible con tablas). Para eventos de varios días, Javascript puede hacer el diseño.

    Demostración: http://jsfiddle.net/ThinkingStiff/XXm8y/

    Salida:

    enter image description here

    Guión:

     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 = '
    ' + eventIndex + '
    '; 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%; } 

    1.

    HTML: