Sistema de eventos con fullcalendar jQuery PHP. En este artículo vamos a crear un módulo para la gestión de eventos a través de un calendario en el cual podemos crear eventos diarios como ser recordatorio diario o semanal. Sin embargo, este sistema se puede aplicar para proyectos de clínicas, hospitales y/o sistemas odontológicas para generar fechas de consultas a los pacientes.
En general, también se puede aplicar en cualquier necesidad de la vida diaria por ejemplo reuniones, cumpleaños, pagos de servicios etc.
Sistema de eventos con fullcalendar jQuery PHP
Tabla de Contenidos
Requisitos para nuestro calendario de eventos
- Una base de datos MySQL para almacenar los eventos que generaremos.
- Lenguaje PHP para realizar la conexión y consultas con la base de datos.
- JQuery para simplificar el guardado de los eventos de manera dinámica y sin refrescar la página.
- La documentación de la librería.
- Descarga de la librería FullCalendar
Partes de este sistema de eventos
Crear una base de datos llamada “PHP_EVENTO” y su tabla con el nombre “MIS_EVENTOS”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | CREATE TABLE IF NOT EXISTS `mis_eventos` ( `id` int(11) NOT NULL, `titulo` varchar(250) DEFAULT NULL, `color` varchar(10) DEFAULT NULL, `inicio` datetime DEFAULT NULL, `fin` datetime DEFAULT NULL ) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=utf8; -- -- Volcado de datos para la tabla `mis_eventos` -- INSERT INTO `mis_eventos` (`id`, `titulo`, `color`, `inicio`, `fin`) VALUES (1, 'Reunion Colegio', '#0071c5', '2018-04-23 09:00:00', '2018-04-23 11:00:00'), (2, 'Gimnasio Gym', '#40e0d0', '2018-04-13 14:00:00', '2018-04-13 17:00:00'), (3, 'Reunion accionistas', '#FFD700', '2018-04-23 08:00:00', '2018-04-23 09:00:00'), (4, 'Reunion acreedores', '#40e0d0', '2018-04-23 10:00:00', '2018-04-23 11:00:00'), (5, 'Reunion con el Banco', '#0071c5', '2018-04-23 11:00:00', '2018-04-13 12:00:00'), (6, 'Reunion con amigos', '#FFD700', '2018-04-23 13:00:00', '2018-04-23 14:00:00'), (7, 'Reunion de trabajo', '#0071c5', '2018-04-23 14:00:00', '2018-04-23 15:00:00'), (8, 'Reunion semanal', '#FFD700', '2018-04-23 16:00:00', '2018-04-23 17:00:00'), (9, 'Pago de telefono', '#228B22', '2018-04-24 18:00:00', '2018-04-24 20:00:00'); ALTER TABLE `mis_eventos` ADD PRIMARY KEY (`id`); |
El fichero index.php
En este archivo sera encargada de mostrar las librerias externas para la ejecucion del nuestro calendario de eventos.
Librerias que usaremos para este calendario
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <link href='css/bootstrap.min.css' rel='stylesheet'> <link href='css/fullcalendar.min.css' rel='stylesheet' /> <link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' /> <link href='css/personalizado.css' rel='stylesheet' /> <style type="text/css"> body { margin: 0px 0px; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } </style> <script src='js/jquery.min.js'></script> <script src='js/bootstrap.min.js'></script> <script src='js/moment.min.js'></script> <script src='js/fullcalendar.min.js'></script> <script src='locale/es-es.js'></script> |
Index.php
Este archivo será el encargado de mostrar el calendario modo “FRONT-END”. Por lo tanto, será la parte visible que interactúa con el usuario.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php session_start(); include_once("db.php"); $consulta_eventos = "SELECT id, titulo, color, inicio, fin FROM mis_eventos"; $resultado_eventos = mysqli_query($conexion, $consulta_eventos); ?> <?php while($registros_eventos = mysqli_fetch_array($resultado_eventos)){ ?> { id: '<?php echo $registros_eventos['id']; ?>', title: '<?php echo $registros_eventos['titulo']; ?>', start: '<?php echo $registros_eventos['inicio']; ?>', end: '<?php echo $registros_eventos['fin']; ?>', color: '<?php echo $registros_eventos['color']; ?>', },<?php } ?> |
Fichero proceso.php
La parte principal del sistema, el cerebro que se encarga de realizar todo el proceso, inserción de registros vía jQuery, mostrar mensajes en la aplicación.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | session_start(); //Fichero de conexion con la base de datos include_once("db.php"); $titulo = filter_input(INPUT_POST, 'titulo', FILTER_SANITIZE_STRING); $color = filter_input(INPUT_POST, 'color', FILTER_SANITIZE_STRING); $inicio = filter_input(INPUT_POST, 'inicio', FILTER_SANITIZE_STRING); $fin = filter_input(INPUT_POST, 'fin', FILTER_SANITIZE_STRING); if(!empty($titulo) && !empty($color) && !empty($inicio) && !empty($fin)){ //Convertir la fecha y la hora del formato $data = explode(" ", $inicio); list($date, $hora) = $data; $data_barra = array_reverse(explode("/", $date)); $data_barra = implode("-", $data_barra); $inicio_barra = $data_barra . " " . $hora; $data = explode(" ", $fin); list($date, $hora) = $data; $data_barra = array_reverse(explode("/", $date)); $data_barra = implode("-", $data_barra); $fin_barra = $data_barra . " " . $hora; $consulta_eventos = "INSERT INTO mis_eventos (titulo, color, inicio, fin) VALUES ('$titulo', '$color', '$inicio_barra', '$fin_barra')"; $resultado_eventos = mysqli_query($conexion, $consulta_eventos); //Comprobar si guardó en la base de datos a través de "mysqli_insert_id" el cual comprueba si existe el ID del último dato insertado if(mysqli_insert_id($conexion)){ $_SESSION['mensaje'] = "<div class='alert alert-success' role='alert'>El evento registrado con éxito<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button></div>"; header("Location: index.php"); }else{ $_SESSION['mensaje'] = "<div class='alert alert-danger' role='alert'>Error al registrar el evento<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button></div>"; header("Location: index.php"); } }else{ $_SESSION['mensaje'] = "<div class='alert alert-danger' role='alert'>Error al registrar el evento <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button></div>"; header("Location: index.php"); } |
Sistema de eventos con fullcalendar jQuery PHP
CONCLUSIÓN
Es una aplicación muy recomendada y podemos usarla como agenda para nuestros sistemas web, citas médicas, etc.
Sin embargo, podemos utilizarlo para nuestro día a día, en cualquier aspecto como recordatorios, reuniones de trabajo, etc.
