Hi:
Here I share a way of adding a fullcalendar.io
Probably there will be better ways of populating the calendar, but I've done with a json custom file.
In my example, I have a table with holydays requests, and they can be 'Accepted', 'Rejected' or 'Pendind review'
Steps
1.- Download the .zip file from h**ps://fullcalendar.io/ and extract the files to a folder. I've extracted to ./phpjs folder (including the locales folder of the zip)
2.- Add a custom file for your calendar (i.e mycalendar.php) and add: (you can add the calendar easily with some options, I will left the options I've used because maybe useful for someone
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8' />
//change the folder here to the unzipped files
<script src='phpjs/main.js'></script>
<link href='phpjs/main.css' rel='stylesheet' />
<script src='phpjs/locales/es.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today BtnDenegadas',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
//I will add a custom button to hide the "rejected holydays"
customButtons: {
BtnDenegadas: {
text: 'Hide Rejected',
click: function() {
if (calendar.getEventSourceById('REJECTED')) {
calendar.getEventSourceById('REJECTED').remove();
}
}
}
},
// With this option, you can show a modal dialog to edit the event. Be sure to have permissions to edit and select modal in the edit page of your talbe
eventClick: function(info) {
$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'AddBtn',url:'solicitud_vacaciones_viewedit.php?id='+info.event.id}));
},
//I will call the same page to get the json, with different parameters (rejected, denied...) to show them in different colors (you can add extraParams)
eventSources: [
// REJECTED
{
url: '/lista_vacaciones.php',
type: 'GET',
extraParams: {
autorizacion: 'Accepted',
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
color: '#28A745', // a non-ajax option
textColor: 'white' // a non-ajax option
},
//PENDING
{
url: '/lista_vacaciones.php',
type: 'GET',
extraParams: {
autorizacion: 'PENDING',
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
color: '#FFC107', // a non-ajax option
textColor: 'black' // a non-ajax option
},
//DENIED
{
id: 'DENIED',
url: '/lista_vacaciones.php',
type: 'GET',
extraParams: {
autorizacion: 'Denied',
},
error: function() {
alert('ha habido un error leyendo los datos.');
},
color: '#DC3545', // a non-ajax option
textColor: 'white' // a non-ajax option
}
]
});
calendar.setOption('locale', 'es');
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
3.- Ok, now I will create the json events to show in my calendar. My file is called lista_vacaciones.php. It's a custom file
3.1 Create the custom file and add your query
<?php
// the calendar will call h**p://localhost/lista_vacaciones.php?start=2020-06-28T00%3A00%3A00%2B02%3A00&end=2020-08-09T00%3A00%3A00%2B02%3A00
//get the start and end date showed (I don't need hours, etc.. so I get the date substring)
$from= substr(Get("start"), 0,10);
$to= substr(Get("end"), 0,10);
//I will add a day to the ending day, because fullcalendario end date is not inclusive, so it's not showed
$sql = "SELECT `id`, `Operario` AS 'title', `start_date` as 'start', DATE_ADD(end_date, INTERVAL 1 DAY) as 'end' FROM `solicitud_vacaciones_view` WHERE `fecha_inicio` >= '".$desde."' AND `fecha_fin` <= '".$hasta."' AND `autorizacion` LIKE '" . Get("autorizacion") . "'";
echo $db->ExecuteJson($sql);
?>
3.2 After generating the files, you have to remove header and footer from this file.
And I think that's all. I hope it can be helpful to someone.