Código HTML y CSS creado para representar un calendario de un mes cualquiera, que utilizaremos en el plugin calendario jQuery.
Todas las etiquetas HTML del calendario jQuery se generan dinámicamente en el momento que se muestra el calendario, es decir, en ninguna parte del código del calendario encontraréis el HTML completo que se utiliza para mostrar el calendario, puesto que su generación se hace a partir de código Javascript, con programación del lado del cliente y varios bucles en los que se recorren los días de un mes para ir generando cada una de las casillas.
Pero antes de ponernos manos a la obra para hacer todos esos scripts en Javascript para la generación dinámica del calendario, hemos dedicado nuestros esfuerzos en generar en HTML y CSS la forma del mismo. Este paso podría ser perfectamente opcional, puesto que no sirve para nada, que no sea clarificar nuestras ideas, ni utilizamos el código tal cual en ningún lado. Sin embargo, merece la pena empezar por aquí por un par de motivos.
- Facilidad: Es mucho más sencillo construir el calendario en HTML y CSS previamente, que escribir código Javascript para generarlo directamente.
- Ahorro de tiempo: trabajar primero este código nos ahorrará tener que hacer la prueba y ensayo en la programación Javascript. Al trabajar con HTML es mucho más fácil mover etiquetas de un lado para otro o cambiar la estructura de nuestro calendario. Asimismo, también ahorraremos tiempo al generar el código Javascript, porque tendremos claro cuál es la estructura del código que deseamos generar.
A continuación podemos ver el código HTML y CSS que hemos decidido utilizar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Layout del calendario</title>
<style type="text/css">
body{
font-family: tahoma, verdana, sans-serif;
}
.capacalendario{
width: 219px;
}
.capacalendarioborde{
padding: 3px;
border: 1px solid #ddd;
}
.diassemana{
overflow: hidden;
background: #339;
margin: 3px 0;
}
.diasmes{
overflow: hidden;
}
.diassemana span, .diasmes span{
margin: 3px;
width: 25px;
display: block;
float: left;
text-align: center;
height: 1.5em;
line-height: 1.5em;
font-size: 0.875em;
}
.diassemana span{
text-transform: uppercase;
color: #fff;
font-weight: bold;
height: 1.8em;
line-height: 1.8em;
}
.diasmes span{
background: #ddd;
}
.diasmes span.diainvalido{
background: #aaa;
}
.diasmes span.domingo{
color: #c00;
}
.capacalendario span.primero{
margin-left:0 !important;
}
.capacalendario span.ultimo{
margin-right:0 !important;
}
</style>
</head>
<body>
<div class="capacalendario">
<div class="capacalendarioborde">
<div class="diassemana">
<span class="primero">l</span>
<span>m</span>
<span>x</span>
<span>j</span>
<span>v</span>
<span>s</span>
<span class="domingosemana ultimo">d</span>
</div>
<div class="diasmes">
<span class="diainvalido primero"></span>
<span class="diainvalido"></span>
<span class="diainvalido"></span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="domingo ultimo">4</span>
<span class="primero">5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span class="domingo ultimo">11</span>
<span class="primero">12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span class="domingo ultimo">18</span>
<span class="primero">19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span class="domingo ultimo">25</span>
<span class="primero">26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span class="diainvalido"></span>
<span class="diainvalido ultimo"></span>
</div>
</div>
</div>
</body>
</html>
Esta página con la estructura de nuestro calendario se puede ver en este enlace.
Si nos damos cuenta, en este código hemos maquetado con CSS sólo parte de la interfaz de usuario del calendario. En ese código HTML faltarían un par de controles para moverse por los meses o años, que sí tenemos en el calendario jQuery final. No obstante, con esta estructura de días del mes tendremos suficiente para comenzar. En el siguiente artículo veremos cómo podemos comenzar a generar ese código del calendario con Javascript y jQuery.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...