Calendario en CakePHP

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.

NOTA: Tras el comentario de Hijal, hemos comprobado que la versión del helper enlazada en este post es para la versión 1.1 de CakePHP, para la versión 1.2 únicamente habría que modificar las funciones flat y picker, de la manera que se muestra a continuación:

function picker($fieldName, $options = array()) {
$this->_setup();
$htmlAttributes = $this->domId($options);
$divOptions['class'] = ‘date’;
$options['type'] = ‘text’;
$options['div']['class'] = ‘date’;
$options['after'] = $this->Html->link($this->Html->image(’../js/jscalendar-1.0/img.gif’), ‘#’, array(’onClick’=>”return showCalendar(’”.$htmlAttributes['id'].”‘, ‘”.$this->format.”‘); return false;”), null, false);
$output = $this->input($fieldName, $options);
return $output;
}

function flat($fieldName, $options = array()){
$this->_setup();
$htmlAttributes = $this->domId($options);
$divOptions['class'] = ‘date’;
$options['type'] = ‘hidden’;
$options['div']['class'] = ‘date’;
$hoder = ‘<div id=”‘.$htmlAttributes['id'].’_cal’.'”></div><script type=”text/javascript”>showFlatCalendar(”‘.$htmlAttributes['id'].’”, “‘.$htmlAttributes['id'].’_cal’.'”, “‘.$this->format.’”, function(cal, date){document.getElementById(\”.$htmlAttributes['id'].”.’\').value = date});</script>’;
$output = $this->input($fieldName, $options).$hoder;
return $output;
}

Estas dos funciones se encuentran ya modificadas en el fichero tar.gz que se adjunta en el post. Junto con otra modificación surgida tras el siguiente comentario en el foro http://cakephp.hospedaxes.com/dudas/topic/calendario-en-cakephp