Se desarrolla un CRUD completo de eventos.
Descargar la estructura del proyecto
Librerias
Vista Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="<?php echo base_url; ?>Assets/css/main.min.css">
</head>
<body>
<div class="container">
<div id="calendar"></div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-info">
<h5 class="modal-title" id="titulo">Registro de Eventos</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="formulario" autocomplete="off">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-floating mb-3">
<input type="hidden" id="id" name="id">
<input id="title" type="text" class="form-control" name="title">
<label for="title">Evento</label>
</div>
</div>
<div class="col-md-12">
<div class="form-floating mb-3">
<input class="form-control" id="start" type="date" name="start">
<label for="" class="form-label">Fecha</label>
</div>
</div>
<div class="col-md-12">
<div class="form-floating mb-3">
<input class="form-control" id="color" type="color" name="color">
<label for="color" class="form-label">Color</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="btnEliminar">Eliminar</button>
<button type="submit" class="btn btn-primary" id="btnAccion">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="<?php echo base_url; ?>Assets/js/main.min.js"></script>
<script src="<?php echo base_url; ?>Assets/js/es.js"></script>
<script>
const base_url = '<?php echo base_url; ?>';
</script>
<script src="<?php echo base_url; ?>Assets/js/sweetalert2.all.min.js"></script>
<script src="<?php echo base_url; ?>Assets/js/app.js"></script>
</body>
</html>Script js
let calendarEl = document.getElementById('calendar');
let frm = document.getElementById('formulario');
let eliminar = document.getElementById('btnEliminar');
let myModal = new bootstrap.Modal(document.getElementById('myModal'));
document.addEventListener('DOMContentLoaded', function () {
calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'local',
initialView: 'dayGridMonth',
locale: 'es',
headerToolbar: {
left: 'prev next today',
center: 'title',
right: 'dayGridMonth timeGridWeek listWeek'
},
events: base_url + 'Home/listar',
editable: true,
dateClick: function (info) {
frm.reset();
eliminar.classList.add('d-none');
document.getElementById('start').value = info.dateStr;
document.getElementById('id').value = '';
document.getElementById('btnAccion').textContent = 'Registrar';
document.getElementById('titulo').textContent = 'Registrar Evento';
myModal.show();
},
eventClick: function (info) {
document.getElementById('id').value = info.event.id;
document.getElementById('title').value = info.event.title;
document.getElementById('start').value = info.event.startStr;
document.getElementById('color').value = info.event.backgroundColor;
document.getElementById('btnAccion').textContent = 'Modificar';
document.getElementById('titulo').textContent = 'Actualizar Evento';
eliminar.classList.remove('d-none');
myModal.show();
},
eventDrop: function (info) {
const start = info.event.startStr;
const id = info.event.id;
const url = base_url + 'Home/drag';
const http = new XMLHttpRequest();
const formDta = new FormData();
formDta.append('start', start);
formDta.append('id', id);
http.open("POST", url, true);
http.send(formDta);
http.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
const res = JSON.parse(this.responseText);
Swal.fire(
'Avisos?',
res.msg,
res.tipo
)
if (res.estado) {
myModal.hide();
calendar.refetchEvents();
}
}
}
}
});
calendar.render();
frm.addEventListener('submit', function (e) {
e.preventDefault();
const title = document.getElementById('title').value;
const start = document.getElementById('start').value;
if (title == '' || start == '') {
Swal.fire(
'Avisos?',
'Todo los campos son obligatorios',
'warning'
)
} else {
const url = base_url + 'Home/registrar';
const http = new XMLHttpRequest();
http.open("POST", url, true);
http.send(new FormData(frm));
http.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
const res = JSON.parse(this.responseText);
Swal.fire(
'Avisos?',
res.msg,
res.tipo
)
if (res.estado) {
myModal.hide();
calendar.refetchEvents();
}
}
}
}
});
eliminar.addEventListener('click', function () {
myModal.hide();
Swal.fire({
title: 'Advertencia?',
text: "Esta seguro de eliminar!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
const url = base_url + 'Home/eliminar/' + document.getElementById('id').value;
const http = new XMLHttpRequest();
http.open("GET", url, true);
http.send();
http.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
const res = JSON.parse(this.responseText);
Swal.fire(
'Avisos?',
res.msg,
res.tipo
)
if (res.estado) {
calendar.refetchEvents();
}
}
}
}
})
});
})Controlador Home
<?php
class Home extends Controller
{
public function __construct() {
parent::__construct();
}
public function index()
{
$this->views->getView($this, "index");
}
public function registrar()
{
if (isset($_POST)) {
if (empty($_POST['title']) || empty($_POST['start'])) {
}else{
$title = $_POST['title'];
$start = $_POST['start'];
$color = $_POST['color'];
$id = $_POST['id'];
if ($id == '') {
$data = $this->model->registrar($title, $start, $color);
if ($data == 'ok') {
$msg = array('msg' => 'Evento Registrado', 'estado' => true, 'tipo' => 'success');
}else{
$msg = array('msg' => 'Error al Registrar', 'estado' => false, 'tipo' => 'danger');
}
} else {
$data = $this->model->modificar($title, $start, $color, $id);
if ($data == 'ok') {
$msg = array('msg' => 'Evento Modificado', 'estado' => true, 'tipo' => 'success');
} else {
$msg = array('msg' => 'Error al Modificar', 'estado' => false, 'tipo' => 'danger');
}
}
}
echo json_encode($msg);
}
die();
}
public function listar()
{
$data = $this->model->getEventos();
echo json_encode($data);
die();
}
public function eliminar($id)
{
$data = $this->model->eliminar($id);
if ($data == 'ok') {
$msg = array('msg' => 'Evento Eliminado', 'estado' => true, 'tipo' => 'success');
} else {
$msg = array('msg' => 'Error al Eliminar', 'estado' => false, 'tipo' => 'danger');
}
echo json_encode($msg);
die();
}
public function drag()
{
if (isset($_POST)) {
if (empty($_POST['id']) || empty($_POST['start'])) {
$msg = array('msg' => 'Todo los campos son requeridos', 'estado' => false, 'tipo' => 'danger');
} else {
$start = $_POST['start'];
$id = $_POST['id'];
$data = $this->model->dragOver($start, $id);
if ($data == 'ok') {
$msg = array('msg' => 'Evento Modificado', 'estado' => true, 'tipo' => 'success');
} else {
$msg = array('msg' => 'Error al Modificar', 'estado' => false, 'tipo' => 'danger');
}
}
echo json_encode($msg);
}
die();
}
}Modelo Home
<?php
class HomeModel extends Query{
public function __construct()
{
parent::__construct();
}
public function registrar($title, $inicio, $color)
{
$sql = "INSERT INTO evento (title, start, color) VALUES (?,?,?)";
$array = array($title, $inicio, $color);
$data = $this->save($sql, $array);
if ($data == 1) {
$res = 'ok';
}else{
$res = 'error';
}
return $res;
}
public function getEventos()
{
$sql = "SELECT * FROM evento";
return $this->selectAll($sql);
}
public function modificar($title, $inicio, $color, $id)
{
$sql = "UPDATE evento SET title=?, start=?, color=? WHERE id=?";
$array = array($title, $inicio, $color, $id);
$data = $this->save($sql, $array);
if ($data == 1) {
$res = 'ok';
} else {
$res = 'error';
}
return $res;
}
public function eliminar($id)
{
$sql = "DELETE FROM evento WHERE id=?";
$array = array($id);
$data = $this->save($sql, $array);
if ($data == 1) {
$res = 'ok';
} else {
$res = 'error';
}
return $res;
}
public function dragOver($start, $id)
{
$sql = "UPDATE evento SET start=? WHERE id=?";
$array = array($start, $id);
$data = $this->save($sql, $array);
if ($data == 1) {
$res = 'ok';
} else {
$res = 'error';
}
return $res;
}
}
?>
