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
Dudas de cakephp » dudas
Calendario en CakePHP
(5 mensajes)-
nuria
Maestro de LlavesPublicado hace 2 years # -
janobmx
MiembroEn 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');Necesito ayuda cuando indican que esas lineas de codigo deben ingresarce en el body, en mi aplicacion no veo ningun body, solo php en los controladores modelos y vistas. lo demas ya lo puse donde indican solo me falta eso, espero me indiquen ya que soy nuevo en cakephp y necesito implementar este calendario. que tengan un buen dia
Publicado hace 1 year # -
janobmx
Miembroamigos ya logre hacer funcionar el calendario, felicitarlos por facilitar tan buen tutorial que me ha venido de perilla a mi aplicacion =)
tenia que agregar el codigo al principio de las vistas y shan funcionasuerte
Publicado hace 1 year # -
Anónimo
Hola,
Gracias por este helper. Funciona muy bien :)
Sólo un detalle para quienes ya usan CAKEPHP 1.3:
La manera de usar Html->link() ha cambiado y usando el código que está aquí, el titulo del enlace será "escapado" siempre. Para especificar que no queremos escapar el contenido de 'title' debemos de pasar escape => false dentro de las opciones que se le pasan a Html->link().
Aquí pego la manera en como modifique la llamada a HTML->link()
$options['after'] = $this->Html->link($this->Html->image('../js/jscalendar-1.0/img.gif'),'#',
array(
'onClick' =>"return showCalendar('".$htmlAttributes['id']."', '".$this->format."'); return false;",
'escape' =>false),
null);Publicado hace 1 year # -
Anónimo
Gracias excelente información, y gracias al amigo que explicó lo de cakephp 1.3, me estaba volviendo loco.
Publicado hace 7 months #
