Sistema de eventos con fullcalendar jQuery PHP

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
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»
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
<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.
<?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.
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"); }

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.
Buenos días.
NO guarda las horas en la base de datos y no se pueden introducir cuando eliges la fecha.
Para que sepas el error.
Un saludo.
Saludos, es posible repetir los eventos los mismos dias? Por ejemplo: tengo una academia, donde lubes, miercoles y viernes a las 18:00 hs, se produce tal evento, y asi mas, puede ser lun mar y mier, 15:00m mi idea es mostrar que tales dias suceden esos eventos, pero sin una fecha especifica, solo dia y hora
Gracias
Implemente el fullcalendar es muy útil, sin embargo por necesidades del sistema requiero modificar las fechas manualmente y para ello estoy utilizando datetimepicker, solo que no he encontrado como hacer que solo me muestre el día sin cargar las horas, minutos y segundos al modificar una fecha, si le doy formato a la fecha al datetimepicker con esta instrucción format: «YYYY-MM-DD HH:mm:ss», me toma por default la fecha y hora del sistema, pero yo quiero que solo me tome la fecha y la hora, minutos y segundos me los ponga en 00:00:00 , ahora si le doy el formato forzando desde la carga de la fecha asi: format: «YYYY-MM-DD 00:00:00, si me muestra la fecha en este formato, pero ya no me permite editar las horas,minutos ni segundos. Como se podria hacer lo mismo pero que si sea funcional. Saludos y Gracias!!
Gracias, es justo lo q estaba buscando. Tengo dos dudas, una como poner los días del calendario en español y dos no consigo hacerlo funcionar en Safari:
Invalid dateundefinedundefined – Invalid dateundefinedundefined
el fullcalendar trae una compilación de idiomas si descargas todo el proyecto del sitio fullcalendar lo encuentras en la carpeta locale, para español seria el archivo es.js . A lo mejor este proyecto lo incluye también.
huy hermano muchas gracias muy util su código espero que me sirva en mi proyecto para una intranet
Saludos! Mil gracias!
Hola que tal quien me puede colaborar con usarlo en español ya que los meses y dias me salen en ingles y uso la libreria de lang,
Buenos días, qué parte del código debo modificar para que el evento no se pueda mover de fecha?
hola excelente tu aportacion , tienes el evento para eliminar el evento ?