BaulPHP

Menu
  • PHP Ejemplos
    • PHP tutoriales
    • MYSQL
  • DESCARGAS
  • HTML5
  • Contáctanos
  • Iniciar Sesión

Sistema de eventos con fullcalendar jQuery PHP

Sistema de eventos con fullcalendar jQuery PHP
4.8 (96.67%) 6 votes

CompartirTweet

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

  • 1 Sistema de eventos con fullcalendar jQuery PHP
    • 1.1 Partes de este sistema de eventos
    • 1.2 El fichero index.php
    • 1.3 Index.php
    • 1.4 Fichero proceso.php
    • 1.5 CONCLUSIÓN
    • 1.6 DESCARGA

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'>&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
Sistema de eventos con fullcalendar jQuery PHP
4.8 (96.67%) 6 votes

Share
Tweet
Pinterest
Linkedin
Email
Entrada Previa
Siguiente Entrada

Related Articles

Simple carrito de compras con php y sesiones

Ventajas y desventajas del lenguaje PHP

Ventajas y desventajas del lenguaje PHP

Mostrar datos MYSQL con while array_push

Mostrar datos MYSQL con while array_push

Creando Funciones en PHP facil

Creando Funciones en PHP fácil

Deja una respuesta

Cancelar respuesta

Anuncios

Recientes

  • PHP CRUD usando OOP con MySQLi en MVC
  • Sistema de chat en vivo con Ajax, PHP y MySQL

Lo más visto

  • Sistema de chat en vivo con Ajax, PHP y MySQL
    Sistema de chat en vivo con Ajax, …
  • PHP CRUD usando OOP con MySQLi en MVC
    PHP CRUD usando OOP con MySQLi en …

BaulPHP

Blog de programación, desarrollo web, tutoriales, PHP, MySQL, jQuery, Ajax, WordPress, Drupal, CodeIgniter y Demostraciones
Copyright © 2019 BaulPHP
Creado por BaulPHP