> Manuales > Plugin Calendario jQuery

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.

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual