Comenzar a generar la estructura del calendario

  • Por
En este paso de la construcción del calendario jQuery vamos a trabajar en la generación de la estructura HTML del calendario.
Estamos construyendo un calendario con jQuery para la selección de fechas y lo estamos realizando paso por paso en el Manual del Plugin Calendario jQuery. En este capítulo del desarrollo vamos a avanzar ya con el proceso para mostrar el calendario una vez se pulse el INPUT o el icono del calendario generados en el artículo Inicio del plugin Calendario jQuery.

La estructura del calendario que queremos generar es como la que vimos en el artículo anterior sobre el layout HTML del calendario. Veremos que en este artículo no vamos a avanzar realmente mucho, respecto al desafío completo, porque queremos ir poco a poco y que se vea con calma toda la parte de generación dinámica de las etiquetas HTML del calendario.

Al final de esta parte del desarrollo habremos construido nuestro calendario tal como se puede ver en esta página de ejemplo.

Si recordamos el punto donde lo dejamos en el paso anterior, teníamos una función mostrarCalendario() en el que habíamos colocado un simple alert(). Esa función es la que vamos a comenzar a codificar ahora y debe generar la estructura HTML del calendario y mostrarla en la página.

En este artículo realizaremos las siguientes mejoras:

Variable local para controlar el estado del calendario

Creamos una variable local al plugin jQuery para controlar el estado del calendario. De momento nos servirá para saber si está abierto o cerrado.

//saber si estoy mostrando el calendario
var mostrando = false;

Nota: Se puede leer este texto para saber qué son, para que sirven y cómo se crean las variables y funciones locales a los plugins jQuery.

La estructura de las capas del calendario y realizaremos un pequeño efecto para abrir el calendario. Además antes de generar el calendario, detectaremos si estaba abierto, porque en ese caso no debemos generarlo de nuevo.

Apertura del calendario

La función mostrarCalendario() debe encargarse, entre otras cosas, de hacer aparecer el calendario cuando se solicite. El único detalle que debemos controlar es si el calendario ya estaba abierto.

function mostrarCalendario(){
         if(!mostrando){
            //es que hay que mostrar el calendario
            mostrando = true;

            //Genero calendario...
            calendario = $('<div class="capacalendario"></div>');
            // ...

            //muestro el calendario
            calendario.show("slow");      
         }else{
            //es que el calendario ya se estaba mostrando...
            calendario.fadeOut("fast");
            calendario.fadeIn("fast");
         }
      }

Como se puede ver, verifico si el calendario estaba o no abierto. Si no lo estaba, lo genero y lo abro con un efecto show(). Si estaba abierto ya y se intenta volver a abrir, hago un parpadeo de la capa calendario con dos efectos fadeOut() y luego fadeIn().

Generación del calendario

Además, en esta etapa comenzaremos a construir el calendario, generando todas las capas que necesitamos. Tenemos una capa para el calendario, otra para el borde del calendario, luego una capa para los días de la semana

//calendario
calendario = $('<div class="capacalendario"></div>');
var calendarioBorde = $('<div class="capacalendarioborde"></div>');
calendario.append(calendarioBorde);

var capaDiasSemana = $('<div class="diassemana"></div>');
var dias = ["l", "m", "x", "j", "v", "s", "d"];
$(dias).each(function(indice, valor){
   var codigoInsertar = '<span';
   if (indice==0){
      codigoInsertar += ' class="primero"';
   }
   if (indice==6){
      codigoInsertar += ' class="domingo ultimo"';
   }
   codigoInsertar += ">" + valor + '</span>';
   
   capaDiasSemana.append(codigoInsertar);
});

calendarioBorde.append(capaDiasSemana);

Inserción del calendario en el documento y posicionamiento CSS

Las capas generadas para el calendario hasta el momento se tienen que insertar en el documento, dentro de la etiqueta BODY de la página. Además queremos que el calendario se posicione al lado del campo INPUT asociado a él.

//inserto el calendario en el documento
$(document.body).append(calendario);

Aunque hagamos el append(), de momento el calendario no se verá, porque la capa está con un estilo CSS para que no se vea. Sólo se muestra más adelante con un show().

.capacalendario{
   width: 219px;
   position: absolute;
   display: none;
}

Ahora veamos cómo cambiar el CSS de la capa calendario para posicionarla al lado del botón que se pulsó para abrirlo.

//lo posiciono con respecto al boton
calendario.css({
   top: boton.offset().top + "px",
   left: (boton.offset().left + 20) + "px"
})

Nota: Las explicaciones sobre posicionar un elemento en la página con respecto a otro están en el artículo Funciones CSS de jQuery para conocer el tamaño y posición de elementos.

El código completo de este plugin, en el momento actual de desarrollo, se puede ver a continuación.

jQuery.fn.calendarioDW = function() {
this.each(function(){
      //saber si estoy mostrando el calendario
      var mostrando = false;
      var calendario;
      
      //elemento input
      var elem = $(this);
      //creo un enlace-botón para activar el calendario
      var boton = $("<a class='botoncal' href='#'><span></span></a>");
      //inserto el enlace-botón después del campo input
      elem.after(boton);
      
      //evento para clic en el botón
      boton.click(function(e){
         e.preventDefault();
         mostrarCalendario();
      });
      //evento para clic en el campo
      elem.click(function(e){
         this.blur();
         mostrarCalendario();
      });
      
      //función para mostrar el calendario
      function mostrarCalendario(){
         if(!mostrando){
            mostrando = true;
            //es que hay que mostrar el calendario
            //dias de la semana
            var capaDiasSemana = $('<div class="diassemana"></div>');
            var dias = ["l", "m", "x", "j", "v", "s", "d"];
            $(dias).each(function(indice, valor){
               var codigoInsertar = '<span';
               if (indice==0){
                  codigoInsertar += ' class="primero"';
               }
               if (indice==6){
                  codigoInsertar += ' class="domingo ultimo"';
               }
               codigoInsertar += ">" + valor + '</span>';
               
               capaDiasSemana.append(codigoInsertar);
            });
            
            //calendario
            calendario = $('<div class="capacalendario"></div>');
            var calendarioBorde = $('<div class="capacalendarioborde"></div>');
            calendario.append(calendarioBorde);
            calendarioBorde.append(capaDiasSemana);
            
            //inserto el calendario en el documento
            $(document.body).append(calendario);
            //lo posiciono con respecto al boton
            calendario.css({
               top: boton.offset().top + "px",
               left: (boton.offset().left + 20) + "px"
            })
            //muestro el calendario
            calendario.show("slow");
            
         }else{
            //es que el calendario ya se estaba mostrando...
            calendario.fadeOut("fast");
            calendario.fadeIn("fast");
            
         }
         
      }
});
return this;
};

Para acabar, se puede ver en la página con el ejemplo en marcha.

En el capítulo siguiente seguiremos trabajando con la función mostrarCalendario().

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