FullCalendar con PHP y MySQL


Seguimos haciendo referencia a los  plugins jQuery, en esta ocasión les voy a compartir un script php: Calendario con PHP y MySQL, usando  el plugins “FullCalendar,  este plugin es muy popular para crear un calendario de manera  interactiva que se parece a “Google Calendar”, permite realizar operaciones básicas en un determinado evento (ver, añadir, modificar y Eliminar.) de forma dinámica a través de peticiones AJAX, además  también permite usar los elementos  de manera sencilla y rápida a través de “arrastrar y soltar elementos”.

Instalación:

Crear una base de datos desde nuestro servidor  de base de datos,  en este caso“calendar”, seguidamente de haber creado la base de datos debemos ejecutar la siguiente consulta SQL.

Archivo bdd.php:  Seguidamente de haber creado la bases de datos, debemos crear  este archivo el cual  se encargará de gestionar la conexión a la base de datos  .El código del archivo es el siguiente.

Archivo index.php: El archivo index se encargará de mostrar los eventos haciendo uso del plugins FullCalendar,  desde donde también se realizaran  una peticiones vía ajax , para gestionar los distintos eventos, como los son: agregar, editar y eliminar eventos. El código del archivo “index.php” es el siguiente:

Agregar eventos: Para guardar un nuevo evento, dentro de la base de datos, debemos crear un archivo llamado “addEvent.php”, este archivo se encargará de recibir los datos que son enviados vía ajax desde el archivo “index.php” , para luego realizar un nuevo registro en nuestra tabla de eventos. El código del archivo addEvent.php es el siguiente.

Editar fecha de eventos: Para editar la fecha de inicio y la fecha final de un evento se ha desarrollado un archivo llamado “editEventDate.php, el cual, como su nombre lo indica es el encargado de modificar las fechas de los eventos, los datos que recibe este archivo son enviados desde el archivo index.php mediante una petición ajax. El código del archivo editEventDate.php es el siguiente:

Editar el titulo del evento: Para editar el titulo del evento se ha creado un archivo llamado editEventTitle.php, este archivo recibe datos desde nuestro archivo index.php, para poder realizar la edición del titulo de los eventos. A continuación mostramos el código.

Cabe resaltar que el archivo anterior, contiene un fragmento de código para eliminar un evento de la base de datos, dicha acción también es gestionada desde el archivo index.php.

Como usar nuestro Calendario:

Crear evento: Para crear un nuevo evento es necesario hacer un click dentro del día que deseamos iniciar un evento, se nos mostrara una ventana modal para que ingresemos los datos relacionados al evento que deseamos crear.
Editar evento (titulo y color): Para editar un evento se debe dar doble click sobre un evento previamente creado, para que se nos despliegue una ventana modal, con la información del  evento.

Editar evento (fecha de inicio y fecha final): Para editar las fechas de inicio y fecha fin del evento, solo se debe posicionarnos sobre el evento y arrastrar el cursor.

Eliminar evento: Para eliminar un evento solo es necesario dar doble click sobre el evento previamente creado, y en la ventana modal que aparezca, debemos seleccionar el elemento de checkbox.

Te invito a que descargues los archivos fuentes de este script, siguiendo el enlace a continuación.

DESCARGAR SCRIPT

 

Nota:

Hemos realizado una versión actualizada de este post, puede verla en el siguiente enlace:

Tutorial de FullCalendar con PHP, MySQL, Bootstrap 5 y jQuery/JavaScript