Tutorial sobre dhtmlScheduler, un calendario en Ajax
by Zilus on 18/09/2009Por alguna razón necesitaba encontrar un calendario que me permitiera agregar eventos al vuelo y que algunas personas pudieran tener acceso a el. Quería encontrar algo dinámico (Ajax) y que tuviera el potencial para funcionar dentro de una intranet que estoy armando en PHP y MySQL. Esto, es para que no me complicara insertando las tablas, sesiones etc en mi proyecto actual.
El resultado de la búsqueda fue dhtmlxScheduler, una app en dhtml que tiene la posibilidad de almacenar los datos de nuestras citas en una base de datos MySQL, PostgreSQL y algunas más.
Lo primero, como siempre, es descargar la aplicación que necesitamos de aquí.
**Este tutorial asume algunas cosas:
- Tenemos un servidor Web previamente configurado (LAMP) o hosteamos en algún lugar.
- El servidor ejemplo se llamara como siempre “Localhost”.
- Las contraseñas e información de base de datos MySQL son muestra, tendremos que ajustar a nuestras necesidades.
- Tenemos conocimientos de PHP, MySQL, Javascript y HTML y CSS.
Una ves descargada y descomprimida en algún directorio de nuestro disco duro (en el tutorial será nuestro home), copiaremos solamente los siguientes ficheros y directorios al directorio destino, es decir, donde vivirá nuestro calendario en el servidor Web.
- $HOME/dhtmlxScheduler/codebase > todo el directorio
- $HOME/dhtmlxScheduler/samples/common/config.php
- $HOME/dhtmlxScheduler/samples/initialization_loading/php/events.php
Ahora, ya en el directorio que hemos creado para la aplicación, vamos a dar vida a un index.php en el que agregaremos el código contenido en el siguiente archivo:
Con lo que en el explorador, debemos ver algo así:
Ahora, echemos un vistazo a como debería de estar organizado nuestro directorio de calendario en el servidor:
Si hasta ahora va todo correcto (si vieron el calendario en el explorador, no se preocupen por el mensaje de error sobre el XML, ya que aun no llegamos a esa parte), Ahora editaremos lo mas fácil, que es el config.php y pondremos los valores que se adapten a nuestras configuraciones.
<?php $server = "localhost"; $user = "miusuario"; $pass = "mipasswd"; $db_name= "miDB"; ?>
Ahora crearemos un fichero llamado vaciado.sql en donde agregaremos lo siguiente:
DROP TABLE IF EXISTS `events`;
SET @saved_cs_client = @@character_set_client;
SET character_set_client = utf8;
CREATE TABLE `events` (
`event_id` int(11) NOT NULL AUTO_INCREMENT,
`event_name` varchar(127) NOT NULL,
`start_date` datetime NOT NULL,
`end_date` datetime NOT NULL,
`details` text NOT NULL,
PRIMARY KEY (`event_id`)
) ENGINE=MyISAM AUTO_INCREMENT=85 DEFAULT CHARSET=latin1;
SET character_set_client = @saved_cs_client;
Inmediatamente después, importaremos ese archivo a MySQL, ya sea con PhpMyAdmin o mediante la linea de comandos.
Finalmente, editaremos el fichero events.php donde ajustaremos las rutas a los archivos que necesita el calendario para trabajar correctamente:
<?php
include ('codebase/connector/scheduler_connector.php');
include ('config.php');
$res=mysql_connect($server, $user, $pass);
mysql_select_db($db_name);
$scheduler = new schedulerConnector($res);
$scheduler->enable_log("log.txt",true);
$scheduler->render_table("events","event_id","start_date,end_date,event_name,details");
?>
Eso es todo, ahora visitamos el calendario con nuestro navegador y podremos agregar citas y eventos dando doble click sobre el día que deseamos, solo es necesario poner nombre y ajustar la hora de comienzo y termino.
neozilus@gmail.com
says:
says:
says:
