Layout HTML para el calendario jQuery

  • Por
Código HTML y CSS creado para representar un calendario de un mes cualquiera, que utilizaremos en el plugin calendario jQuery.
En el Manual del Calendario jQuery estamos viendo paso por paso la creación de un plugin jQuery que nos sirva para la selección de fechas. En este artículo vamos a mostrar cómo sería el código HTML y los estilos CSS para la representación del calendario de un mes.

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.
Nota: Hemos llamado layout a la estructura HTML y CSS del calendario, pero quizás confunda esa palabra, porque este código no lo vamos a utilizar como plantilla, sino como guía para saber cómo debemos programar el plugin.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Ceroid

04/3/2013
Calendario link
Hola.
Tengo el script de un pequeño y sencillo calendario que pasa "solito" los días los meses y los años, pero necesito que haga algo más aún. Necesito crear un vinculo idéntico para cada día, pero que solo esté disponible para clickear sobre él el día actual que está remarcado y ninguno más. Lo ideal, me parece, sería que el remarque (highlight) que cambia cada día para señalar el día actual, "arrastrara" consigo mismo el link (pues es el mismo para cada dia) ¿Es posible hacer eso?
Gracias adelantadas.
Ceroid.