Portada » JQuery biblioteca de JavaScript » Sistema de eventos con fullcalendar jQuery PHP

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

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'>&times;</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'>&times;</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'>&times;</span></button></div>";
	header("Location: index.php");
}
Sistema de eventos con fullcalendar jQuery 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.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad