En este paso de la construcción del calendario jQuery vamos a trabajar en la generación de la estructura HTML del calendario.
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;
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"
})
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().
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...