Calendario en CakePHP 1.2
Lunes, 28 Julio 2008
Cuando estamos desarrollando una página web, a menudo necesitamos introducir un calendario que nos permita seleccionar las fechas sin tener que escribirlas a mano.
En este post vamos a explicar cómo hacer esto, utilizando para ello el calendario DHTML Calendar desarrollado por Dynarch. Es un calendario con licencia GNU y que cubre perfectamente todas las funcionalidades que necesitamos.
Todos los ficheros necesarios para introducir el calendario en nuestra página web, junto con la estructura como se organizan en CakePHP 1.2, pueden descargarse calendario. Lo explicaremos paso a paso.
Lo primero que tenemos que hacer es descargarnos el calendario (podemos hacerlo directamente de la página web de Dynarch, o bien mediante el enlace del párrafo anterior) y descomprimirlo en la carpeta app/webroot/js. Necesitamos también otro fichero javascript, common.js, que también meteremos en esa carpeta. En el body, incluiremos estos ficheros escribiendo:
// Calendar includes
echo $javascript->link('jscalendar-1.0/calendar.js');
echo $javascript->link('jscalendar-1.0/lang/calendar-es.js');
echo $javascript->link('common.js');
// CSS Theme
echo $html->css('../js/jscalendar-1.0/skins/aqua/theme');
Necesitamos ahora implementar un helper para que nos sea mucho más fácil la utilización de este calendario. Lo descargamos del enlace anterior y lo metemos en la carpeta app/views/helpers. Si miramos el código de este helper vemos que tenemos dos funciones, picker y flat, que nos permiten hacer que este calendario aparezca al pulsar un botón o que esté siempre visible en nuestra página.
Ya sólo nos falta introducir este calendario en nuestras páginas.
En el controlador, importamos el helper:
var $helpers = array('DatePicker');
Y en la vista mostramos el calendario:
echo $datePicker->flat('fechaCalendarioFlat', array('id'=>'fechaCalendarioFlat'));
echo $datePicker->picker('fechaCalendarioPicker', array('id'=>'fechaCalendarioPicker'));
Podemos ver una demostración del funcionamiento del calendario en este enlace.
A partir del código proporcionado, podríamos añadir muchas funcionalidades. Por ejemplo, podremos editar el código del helper, para añadirle un observador de javascript al calendario tipo flat y que al pulsar en una fecha nos lleve a otra url, o podríamos hacer que ciertas fechas especiales se coloreen de manera distinta al resto.