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.

10 comentarios en “Sistema de eventos con fullcalendar jQuery PHP”

  1. 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

  2. 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!!

  3. 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

    1. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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