Introducción al calendario Javascript con jQuery

  • Por
Objetivos que nos planteamos para la realización de un calendario dinámico con Javascript y jQuery, que sirva para selección de fechas.
A lo largo de varios capítulos que iremos publicando dentro del manual del plugin jQuery Calendario vamos a realizar la construcción de un componente o widget para la selección de fechas, dinámico con programación del lado del cliente.

En este capítulo queremos simplemente hacer una declaración de intenciones y ofrecer varias referencias a manuales y recursos que sería necesario conocer para poder enfrentar las explicaciones.

Cómo es el calendario que vamos a construir

Lo que vamos a realizar quizás no deberíamos llamarle calendario sino componente para seleccionar fechas, lo que se conoce también como widget Datepicker. Es un plugin que nos permitirá convertir un campo de texto normal en un componente de interfaz de usuario para que el visitante pueda seleccionar una fecha cualquiera.

El componente se pone en marcha con un clic y entonces aparece una capa flotante que muestra un calendario de un mes. El usuario puede navegar por los distintos meses del año o incluso seleccionar otro año y ver el calendario de cualquier mes y año que necesite.

Una vez seleccione una fecha dentro del calendario, ésta se escribirá en el campo de texto asociado al calendario.

En definitiva, lo mejor que podemos hacer para hacernos una idea exacta de lo que vamos a construir es ver el ejemplo en funcionamiento en una página aparte.

A lo largo del Manual del Calendario jQuery explicaremos cómo crear el calendario paso por paso, para que sirva de práctica a las personas que están aprendiendo el framework Javascript. Para ello, hemos creado diversos estados del desarrollo del proyecto, en diversos ejemplos de dificultad progresiva, que pensamos que serán suficientemente básicos para que el estudiante pueda pasar de uno a otro sin demasiadas complicaciones.

Referencias útiles a manuales que debes conocer

Por supuesto, dado que es un calendario Javascript, necesitaremos un conocimiento de Javascript básico para poder trabajar con este componente. Podremos aprender todo sobre este lenguaje en la sección Javascript a fondo.

El calendario lo hemos construido utilizando jQuery, un popular Framework Javascript que facilita bastante el desarrollo de todo tipo de componentes dinámicos para páginas web. Si lo deseas, puedes aprender dicho framework en el Manual de jQuery.

Nota: Esta práctica tiene una dificultad avanzada y requerirá un conocimiento medio de jQuery. Pero si lo que deseas es utilizar el plugin de calendario en una página web, realmente no tienes por qué aprenderte cómo se ha hecho el calendario. Casi cualquier persona con un conocimiento básico de Javascript podrá entender los pasos para utilizarlo en sus proyectos.

Gracias a la arquitectura de los plugins jQuery, la implementación del calendario en una página web es extremadamente simple, puesto que sólo requiere hacer una sencilla llamada al plugin jQuery para ponerlo en marcha.

Para recibir una ayuda sobre la implementación del calendario visita el artículo cómo utilizar el calendario jQuery.

Otro calendario dentro de DesarrolloWeb.com

Queremos decir que éste no es el único calendario que hemos creado o explicado dentro de DesarrolloWeb.com. En realidad hay diversos scripts en distintos lenguajes ya tratados en este sitio.

Nota: Una parte del código del presente plugin jQuery está basado en el código del calendario PHP. La parte que genera los días de cualquier mes es, digamos, una traducción y adaptación del script a Javascript.

Otros scripts para hacer calendarios

Ahora queremos dar algunas referencias a otros calendarios que no hemos explicado, pero que sí tenemos clasificados en DesarrolloWeb.com. Si te sientes más a gusto con otros lenguajes o librerías, quizás te puedan interesar los siguientes recursos: Queremos nombrar especialmente aquí el widget datepicker de las librerías jQuery UI, que también funciona con jQuery y es mucho más completo que el desarrollo que estamos presentando en este manual.

Referencia: Si deseas aprender jQuery UI, te recomendamos leer los artículos de los Primeros pasos con jQuery UI

Descargar el calendario

Todos los scripts que hemos realizado para la construcción paso a paso de este plugin jQuery para hacer un calendario los podemos descargar para su uso.

Descargar los archivos del calendario jQuery.

Está permitido cualquier tipo de uso del calendario, incluso su modificación y utilización en proyectos comerciales. Ahora bien, si realizas mejoras en este plugin de calendario te pedimos por favor que nos las envíes, para publicarlas y que otras personas puedan aprovechar tu trabajo.

Vamos a comenzar enseñando a los interesados los pasos para utilizar este calendario en sus proyectos.

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