Posts Tagged ‘jscalendar’

JsCalendar Helper para CakePHP

agosto 26, 2007

Necesitaba incluir el JsCalendar y me puse a buscar si estaba implementado el Helper, pero no. Lo más parecido era un controlador que se puede ver en este link.

No está nada mal, pero me resultaba un poco molesto tener que usarlo como controlador. Además el propio Pierpaolo invita a que lo mejoremos.

Yo decidí encararlo como Helper y que a la hora de imprimir el calendario en la vista sea lo más general posible.

El primer problema que se me presentó fue el de incluir los archivos .js y .css. Como estoy trabajando con 1.1.16.5421 necesitaba incluirlos en el layout. Googleando encontré que alguien ya había hecho algo para resolver este problema aquí. Hay que tocar el layout pero esto provee un Helper bastante bonito para lo que necesitaba.

Resuelto esto ya podía armar el Helper.

Tomé la clase PHP que viene con la distribución del JsCalendar. adapté el constructor al esquema de CakePHP. Desde el constructor se selecciona el look, el idioma, el directorio relativo a js, css e img de CakePHP. A su vez se setean otras opciones por defecto. Además tuve que agregar dos parámetros. Uno ‘align’=>”, porque con MSIE salía por cualquier lado. El otro es ‘width’=>’240px’ porque el ancho iba hasta el borde derecho de la pantalla.

El método de carga de los scripts fue modificado para trabajar con HeadHelper.

Por último modifiqué “make_input_field” para que funcione con un input, una image y un link del HtmlHelper. También valida que no se haya invocado el método de carga mediante una variable de instancia. Con eso ya tenía el calendario funcionando como un helper.

¿Cómo lo uso? Cargo el helper en el controlador con la variable $helpers.

<?php
echo $jsCalendar->make_input_field( 'Proyecto/inicio', #tagName del input
array(), #opciones del calendario(*)
array(
'name'=>'data[Proyecto][inicio]', #campo
'value'=>$html->tagValue('Proyecto/inicio' ) #valor inicial
); ?>

(*) se puede ver la documentación del jsCalendar.

No hace falta usar tantas líneas, la idea es usarlo como cualquier otro widget de Html.

Los scripts js del calendario se deben poner en webroot/js/calendar/. Los css en webroot/css/calendar/ y las imágenes en webroot/img/calendar/. En caso de usar Skins deben estar los archivos distribuidos en los directorios de los css y las imágenes.

Se puede descargar el helper con el esquema de directorios.

Bueno, espero que sea útil como me resultó a mí y si quieren mejorarlo, bienvenidos sean.

Anuncios