Tutorial sobre dhtmlScheduler, un calendario sobre Ajax

Por 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:

index.txt

Con lo que en el explorador, debemos ver algo así:

calendario

Ahora, echemos un vistazo a como debería de estar organizado nuestro directorio de calendario en el servidor:

calendario-dir

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.

  • Alberto Magno

    Hola, excelente explicación en tan pocos pasos. me fucnionó, Gracias

  • Zilus

    De nada Alberto, espero que te guste el Blog.

    Saludos!

  • ALejandro

    Me gustaria si me puedes enviar el archivo index.txt ya que no lo puedo ver desde el link que dejastes..porfavor..gracias por tu tutorial.

    alejandro

  • ALejandro
  • Ariel

    Hola:

    Seguí al pie de la letra todos los pasos del tutorial y me sigue saliendo el mensaje sobre XML y no me guarda los eventos en la base de datos.

    ¿Me faltará el dhtmlxConnector?

    Uso PhpMyAdmin, MySQL.

    HELP

  • Ariel

    Hola amigos, he resuelto el tema. Se me pasó de largo un detalle, tenía una ruta mal escrita (seguro fué por leer a la rápida).

    En el último paso, cuando hay que configurar el events.php, tenia por defecto la ruta:

    include (‘common/config.php’);

    cuándo solo es:

    include (‘config.php’);

    Revisa ese último paso Alejandro, de seguro es ese mismo error en el que estás incurriendo.

    The Zilus, gracias por tu blog y poner a disposición esta gran herramienta.

    Saludos desde Chile.

  • Zilus

    Que bueno que ya esta jalando Ariel.

    Saludos!

  • xavi

    buenas:

    dos cosas:

    1.- al editar el config.php le añado ese codigo o lo sustituyo?
    2.- no me sale lo de importar el fichero, alguien me lo peude pasar?

    gracias

  • xavi

    y donde lop ongo al arquivo despues de importar?

  • George

    y como funcionaría con sql server en vez de mysql?

  • Zilus

    No lo se, no he probado y en realidad no se si tenga soporte. La unica forma de saber, es probando.

    Saludos!

  • Juan Pablo G

    Antes que todo agradecer el aporte y mi consulta es la siguiente quiero que sea una persona que administre los eventos me refiero q

  • Juan Pablo G

    Antes que todo agradecer el aporte y mi consulta es la siguiente quiero que sea una persona que administre los eventos me refiero que la haga de administrador que tenga esos privilegios y los demas usuarios que tengan tan solo el permiso de ver el calendarios con los eventos…

    ¿Como lo podria hacer?

    desde ya gracias

    PD:lo siento por el doble post

  • Zilus

    mmm, lo que se me ocurre, es que desde un login, definas el modo en que el calendario carga.

    Ejemplo:
    admin = calendario en RW mode
    usuarios = solo lectura

    Porque en si el calendario no tiene esas funciones.

    Espero que te sirva!! Gracias por leer el blog.

  • Ariel

    Ha surgido otra duda. Resulta que el calendario de un rato para otro dejó de funcionar en IE y Firefox. Me sale la ventana Error Type: LoadXML.

    Lo raro está en que en Chrome si me funciona, qué puede ser?

  • Ariel

    Pillé el error. Al visualizar la agenda en Firefox o IE y mientras hayan caracteres no válidos como acentos y eñes, este mostrará error. Es preciso entonces guardar texto sin estos caracteres para la correcta visualización en todos los navegadores.

  • Ariel

    Invito a todos y especialmente a The Zilus a subir más material o mejoras que hayan aplicado a la agenda.

    Se agradecería harto.

  • Zilus

    Ariel, que bueno que detectaste el error, porque no usas UTF-8 con eso podrias evitar ese tipo de problmas.

    Saludos!

  • joel

    Hola mi estimado yo estoy usando actualmente este calendario y he podido modificar muchas cosas lo unico que sigo sin entender es como hacer una pantalla que solo sea de lectura que no puedan editar ni crear, tu sabes como hacerlo…

    Saludos..

  • Zilus

    Podrias desactivar los eventos del raton desde js… no lo sé, tal ves te funcione.

    Saludos!

  • Joe

    Verifica que el index.txt no se puede ver.

  • Miguel

    Hola muy buen tutorial, pero tengo una pregunta, como puedo hacer para agregar otro campo, logre pasar el calendario a MsSQL sin problemas, pero ahora quiero enviar una variable global en mi index.php para que se grabe en un campo de la tabla, pero no tiene que mostrarlo en el calendario es solo para control interno. Gracias por la pronta respuesa. Saludos

  • @Miguel Si es con php solo pasa la variable con GET o POST.

  • Miguel

    Gracias Zilus, lo hice agregando un nuevo campo al formulario y lo mande como oculto, para que el conennector lo procese como un campo mas del arreglo y hasta ahora todo bien. Ahora todo me funciona perfecto en internet explorer pero en firefox me aparece un error de xml no se como pasarte la imagen del error….Saludos

  • Miguel

    Joel para que sea solo lectura el claendario, al momento de inicializarlo en el java script solo debes poner:

    scheduler.config.readonly = true;

    y listo

    Saludos

  • Ariel

    Chicos, me di cuenta de otro error. Fíjense que en la segunda semana de Octubre se repite un día (número), y pasa en todos los años. Fuí hasta el sitio oficial de dhmlxscheduller, vi los ejemplos y estaba el mismo error. ¿Alguien se había dado cuenta?. De ser así: ¿Cómo podemos arreglarlo?

  • Ariel

    Para ocupar el campo “Persons”, ¿Debo agregarle un campo a la tabla? ¿Cuál?

  • Zilus

    @Ariel que chistoso eso de la repeticion de un dia… no lo habia visto!

    Para el campo, lo debes dar de alta en la DB.

  • Onifur

    Buenos días,

    A ver si alguien puede ayudarme, y decirme como puedo administrar este magnífico calendario, para que cada usuario que acceda a mi web, con su session, solo veas sus próximas citas y pueda insertar,guardar y borrar las que quiera, siempre que sean de él…

    Muchas gracias de antemano!! 🙂

  • Ariel

    Me han enviado un mail respecto al error que hay en el mes de Octubre del calendario:

    Ariel,

    This is error with some localized versions of Windows.
    Please check:
    http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:known_issues
    http://support.dhtmlx.com/x-files/scheduler_2_1/brazil_patch.zip

    Best regards,
    Support team
    http://www.dhtmlx.com

    No me dieron más indicios de dónde y cómo instalarlo. Si alguien prueba y le resulta me avisa. Voy a trabajar estos días para ver que puedo hacer. No tengan dudas que compartiré mi trabajo si todo sale bien.

    Con respecto a la petición de Onifur, tengo la misma inquietud, solo que eso creo que me tomará mas tiempo e invito a que si alguien haya logrado el tema de las “sesiones” en el calendario comparta ese trabajo.

    The Zilus, gracias por haber compartido tus conocimientos y crear este post que nos ha servido de mucho. Si gustas, puedes contactarme por mail y trabajar el tema de las sesiones para el calendario.

    Saludos.

  • Zilus

    @Ariel, por ahora no tengo el tiempo para crear la parte de las sesiones, te lo digo sinceramente, pero se me ocurre tal ves agregar un campo a la DB que sea “user_id”

    Después, al entrar al calendario modificar el query para que todos los eventos tengan X id de usuario aparezcan, incluso, se podria agregar un id de usuario “maestro” para que se muestren los eventos por usuario y los del usuario maestro, esto para eventos en donde sin importar el usuario que vea su calendario, pueda ver eventos generales.

    Si quieres ir adelantando con todo gusto te apoyo via correo electrónico!

    @Onifur arriba describo una posible solución al problema.

  • hola amigo, gracias por el tutorial.
    tengo una consulta no sé si alguien puede decirme como agregar un usuario y contraseña ante de iniciar a la agenda, despues solo visualizar los evento creado por ese usuario…alguna ideas??…Gracias de antemano

  • Giancarlo

    hola amigo, gracias por el tutorial.
    tengo una consulta no sé si alguien puede decirme como agregar un usuario y contraseña ante de iniciar a la agenda, despues solo visualizar los evento creado por ese usuario…alguna ideas??…Gracias de antemano

  • @Giancarlo:
    mmm, lo que se me ocurre, es que desde un login, definas el modo en que el calendario carga.

    Ejemplo:
    admin = calendario en RW mode
    usuarios = solo lectura

    Porque en si el calendario no tiene esas funciones.

    Espero que te sirva!! Gracias por leer el blog.

  • Luis

    Muy buen tutorial me funciono a la perfección, solo una pregunta, como lo paso a español?

    Nuevamente Muchas gracias por este tuto

    Saludos

  • Luis

    Soy Luis Nuevamente acabo de ver como pasarlo a español =)…. hay que editar el archivo codebase/dhtmlxscheduler.js

    Saludos

  • Zilus

    @Luis Gracias por el tip!

  • Freddy

    Lo instale y es espectacular, como hago para que registre los eventos asociados a los usuarios en una base de datos..graciass………

  • Rene Antoine

    HOla gracias por el tutorial esta genial la agenda, ahorita tengo problema pues cuando ingreso un nuevo evento no logro guardar en la base de datos ??? que podria ser.

  • J.Carlos

    Buenas a todos, os comento una parámetro de configuración que a las usuarios de habla hispana os puede venir bien a la hora de configurar el calendario. Por defecto, el calendario muestra con codificación UTF-8, por lo tanto, los acentos y ñ y caracteres de este tipo no aparecen correctamente. Para conseguir que aparezca bien, hay que entrar al fichero base_connector.php y modificar la siguiente línea:
    private $encoding=”utf-8″; y cambiarla por private $encoding=”ISO-8859-1″;

    De esta forma conseguiremos adaptar el calendario a nuestro idioma o al que se necesite.
    Saludos y gracias por todos vuestros aportes.

  • Rene Antoine

    Hola chicos, el calendario ya me corre de maravillas mi problema fue al momento de conectarme con la base de datos. Ahora ya cree las sesiones en php hasta ahi todo bien, luego estoy personalizando el calendario segun mis necesidades, por ejemplo que un usuario solo pueda ver el calendario sin modificarlo que tambien me salio bien quitandole la opcion de guardar en la base de datos. AHORA quiero modificar Los Titulos que aparecen en la ventana para crear nuevos eventos, es decir cambiar la palabra LOCATION y DESCRIPTION, alguien sabe como. GRACIAS

  • Que tal Zilus,

    Me ha funcionado muy bien esta agenda, solo que tengo un problema.

    Quiero adaptar esta agenda tomando en cuenta el id del usuario; es decir, que me muestre las actividades del usuario que se conecte. No se donde poner un where en la consulta.

    Felicidades por la aportacion.

    Saludos

  • carlos cadenas

    AMIGOS NECESITO Q POR FAVOR ALGUIEN ME DIGA SI SE PUEDE APLICAR ESTE CALENDARIO EN DREAMWEAVER Y COMO PODRIA HACERLO..ESTOY REALIZANDO UN SISTEMA EN PHP CON MYSQL. ESTARIA MUY AGRADECIDO POR SUS RESPUESTAS.

  • Jose Freddy

    Un saludo a todos, es que necesito hacer algo con dhtmlxschedules y es lo siguiente, cuando uno comienza a crear un evento, quiero hacer que por medio de un campo, pueda cargarse la lista de otros datos… (supongamos que yo tengo un campo categoria) y que de acuerdo a como yo elija la categoria se carge una sublista dentro de un select que se creo en el formulario para crear eventos dentro del modulo dhtmlxschedules. Si alguien tiene idea de como hacer esto, os agradezco su apoyo (y). y si logro conseguir la respuesta. Les escribire.

  • Cristina

    Holaa gentee! Por fin he encontrado un tutorial donde como empezar a usar dhtmlxScheduler!
    Pero mi duda es la siguiente: yo estoy haciendo una pagina privada con usuarios en Java+struts y necesito justo una cosa como esta para que cada uno tenga su propio calendario con sus eventos pero no se si lo podré usar. Aqui explicáis como funciona con PHP pero me podríais explicar con Java??y como poder enlazarlo con mi base de datos en MySQL???
    Me seria de grandisima utilidad porque lo necesito y no encuentro nada. En caso de no poder si alguien supiera que otra cosa podría hacer también se lo agradecería. Esto bastante bloqueada.
    Muchas gracias de antemano.

  • jhedse

    Hola todos!, he seguido todos los pasos del tutorial y me esta funcionando de maravilla, pero en mozilla firefox me sale la ventana del xml, alguien sabe como se soluciona esto?

  • Amigo sou brasileiro, se não conseguir entender o que falo nao tem problema, mas o que quero que saiba é que você está de parabéns!!! eu consegui graças as suas esplicações!

    Deus te abençoe!!

    XD

  • mario

    hola ZILUS me gusto’ mucho el tuto muy bueno, conciso y eficaz.

  • mario

    hola..quisiera saber si me pueden ayudar…lo q deseo es adaptar este calendario a unas tablas q yo tengo, osea jalar de mis tablas algunos datos y que estos se muestren en el calendario.
    Si me pueden ayudar con algo de informacion al respecto. Gracias

  • ricardo

    tres millones de gracias pase horas tratando de configurarlo y con tu tutorial no me lleve ni 10 minutos.

  • Sofia

    Alguien sabe como puedo modificar el rango de horas que muestra la agenda es decir que muestre 8:00, 8:20, 8:40, esto se puede parametrizar?

  • Shaka07

    para hacer una conexion odbc solo debes llamar de esta manera en el archivo de config.php
    $servidor_odbc = “IP del servidor de conexion”;

    $basedatos_odbc = “nombre de la base de datos”;
    $usuario_odbc = “usuario “;
    $clave_odbc = “contraseña”;

    $dsn_odbc = “odbc:DRIVER={iSeries Access ODBC Driver}; SYSTEM=$servidor_odbc; DBQ=$basedatos_odbc”;

    // y en el archvio even.php creas una nueva clase llamar las variables y la tabla con los campos de la misma manera y llamamos estos archivos

    require (“codebase/connector/scheduler_connector.php”);
    require(‘codebase/connector/db_pdo.php’);

    $res = new PDO($dsn_odbc,$usuario_odbc,$clave_odbc);

    $scheduler = new schedulerConnector($res,”PDO”);
    //$scheduler = new GridConnector($res,”PDO”);
    $scheduler->enable_log(“log.txt”,true);

    $scheduler->render_table(“events”,”event_id”,”start_date,end_date,event_name,details”);

    // de esta manera se conectara con la base de datos y funcionara igual como lo hace para mysql.

  • Pingback: payday loan online()

  • Pingback: direct payday loans in north vancouver lender()

  • Pingback: drugrehabcentershotline.com addiction treatment()

  • carlos

    Que tal amigo, quisiera cambiarlos de idioma como podria hacerlo es que esty haciendo un proyecto parecido, me serviria mucho tu ejemplo pero como puedo cambiarlo de idioma?? te agradeceria mucho que me puedas ayudar

  • carlos

    otra de mis preguntas es porque me sigue apareciendo el mensaje de:

  • Christian Vicente Cossio

    Para cambiar el idioma? vi la carpeta locale, pero no le pillo donde cambiarlo

  • Miriam Carranza

    Hola Buenas tardes, alguien sabe que documento debo ligar y campos
    debo agregar a la base de datos para que me tome la opcion de repetir
    eventos entre dia, mes, año

Suscribete ahora

Suscríbete y recibe información valiosa sobre UI, UX, CX y otras soluciones informáticas