Buen día,
Este es mi primer post para la comunidad y espero les sirva:
Voy a explicar como implementar un iCal jQuery (Calendario de eventos con estilo similar al del iphone) y poblarlo con los datos que tengo en MySQL a través de Kumbiaphp Framework:
Lo primero que deben hacer, obviamente después de tener configurado Kumbiaphp Beta2, es descargar el iCal desde aquí . Los archivos .js se ubican en /default/app/public/javascript, el archivo .css se ubica en /default/app/public/css.
Creamos una tabla en MySQL que va a ser nuestro insumo de datos para poblar el calendario (supongo hasta aquí que ya saben que es un modelo, como se configura la base de datos y sus convenciones) :
CREATE TABLE IF NOT EXISTS `agenda` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`fecha` date NOT NULL,
`hora_inicio` time NOT NULL,
`hora_fin` time NOT NULL,
`producto_id` int(11) NOT NULL,
`cliente_id` int(11) NOT NULL,
`estado` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT= 8;
Si se fijan, la creación de la tabla está asociada a dos tablas que son cliente y producto.
En la clase modelo agenda.php se crea una función:
public function getCalendario() {
$sql = "SELECT fecha as date, producto.nombre as title,
CONCAT(hora_inicio, ' hasta ', hora_fin, ' ', cliente.nombres, ' ', cliente.apellidos) as 'desc'
FROM agenda
INNER JOIN cliente ON (agenda.cliente_id=cliente.id)
INNER JOIN producto ON (agenda.producto_id=producto.id)";
return $this->find_all_by_sql($sql);
}
Cómo pueden ver hay un join a dos tablas asociadas.
En el controlador agenda_controller.php se crea una función que llame la consulta creada en el modelo y lo traiga en un array:
public function verCalendario() {
$this->calendario = Load::model('agenda')->getCalendario();
}
Luego en el directorio /default/app/view/_shared/partials se crea un partial, decidí hacer un partial para reutilizarlo en caso de que necesite incluirlo en otras páginas.
<script type = "text/javascript">
$(document).ready(function () {
$("#ical").ical({
daynames: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
//startOnSunday: true,
eventdates: <?php echo json_encode($Model); ?>
});
});
</script>
<div id="ical"></div>
Como ven estoy usando la función json_encode que me va a arrojar un formato como este:
eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
{"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"}]
Los alias que utilicé en la consulta del modelo (date,title,desc) están asociados a este formato.
Y por último se implementa la vista verCalendario.phtml con el siguiente código:
<?php
echo Tag::js('jquery-1.3.2.min');
echo Tag::js('jquery-ical');
Tag::css('master');
?>
<?php echo View::content(); ?>
<?php echo View::partial('ical/script', false, array('Model' => $calendario)); ?>
Y esto es todo, espero sea de utilidad y si tienen aportes, mejoras o recomendaciones ¡bien recibidas sean!
