Crear un horario semanal usando CSS/HTML

Question

Estoy tratando de crear un horario semanal de clases para un estudio de yoga. he creado una versión estática por medio de una tabla que se puede ver en:

http://www.studioleisure.com/classes.php

Nota: ^^ Esta página web contiene ahora la versión HTML acabada que se creó utilizando las respuestas a esta pregunta.

Tengo un problema con las clases que comienzan a los 15 minutos de la hora o las que duran más de una hora y resulta bastante difícil crear el PHP para esta versión.

Me preguntaba si alguien tenía alguna idea de crear una que tiene un aspecto similar, pero más fácil de codificar el PHP para.

Answer 1

que perderia la mesa, y utilizar sólo las columnas. Luego coloque las clases con CSS (position:absolute) y calcule el valor top en función de su hora de inicio y la 'altura' en función de su longitud. Las líneas horizontales podrían lograrse utilizando una imagen de fondo repetitiva. Las etiquetas de la izquierda se pueden colocar de la misma forma que se colocarían las clases.

HTML podría ser algo como esto:

<ul> 
<!-- Monday: --> 
<li> 
    <strong>Monday</strong> 
    <ul class="classes"> 
    <li style="top:200px; height:100px;"> 
    <span>10:30 - 11:45</span> 
    Class title 
    </li> 
    <li> 
    <!-- More classes here... --> 
    </li> 
    </ul> 
</li> 
<li> 
    <!-- Other days here... --> 
</li> 
</ul> 
<ul class="labels"> 
<li style="top:180px">10:00</li> 
<!-- More labels here... --> 
</ul> 

Answer 2

Niza marcado. Pero tienes razón: hacer esto con una granularidad fina dará como resultado un monstruo de una tabla (y el código que lo acompaña para generarlo). Es factible, pero hay una manera más fácil, aunque no es tan claro:

crear la tabla como lo haría normalmente, pero que sea vacía. Sin embargo, establezca anchos/alturas fijos para cada fila y columna. A continuación, utilice la posición absoluta para colocar las entradas del calendario en la parte superior de la tabla. Presto: se ve igual, pero puede colocar las entradas con precisiones minuciosas si lo desea.

La desventaja de esto es que copiar y pegar no funciona (muy bien) en esta bestia, y no tengo idea de lo que va a hacer para SEO y accesibilidad. Probablemente nada bueno. Entonces, si esos dos son importantes para usted, tendrá que recurrir a soluciones alternativas (aunque creo que hay maneras de usar el esquema Y tienen buena SEO/accesibilidad).

Agregado: Ah, y me acabo de dar cuenta de que también tendrá que estar pendiente de los textos desbordados. Las celdas de tabla se expandirían automáticamente, pero los DIV absolutamente posicionados no se expandirían.

Agregado 2: Oye, aquí tienes una idea: usa el posicionamiento relativo para cambiar un poco las entradas. En lugar de escribir el texto directamente en las celdas, escríbalo dentro de un SPAN y luego colóquelo relativamente de modo que se desplace durante los 15 minutos necesarios. De nuevo, esto requiere anchos fijos y alturas de celdas, y el desbordamiento será un problema, pero el SEO/accesibilidad no se verá afectado, y el copiar y pegar funcionará como se espera.

Answer 3

A continuación se presenta una plantilla de calendario semanal que he creado.

https://github.com/NisalSP9/Weekly-time-schedule-template-jquery 

Y esto es un ejemplo de ello.

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111