Hi all, I’ve solved the implementation of FullCalendar, and it is actually very simple with PHPMaker recent versions with Api_Action! Here is the minimum code required to get it working.First create Api_action routine like this:
$app->get('/schedule/{mode}', function ($request, $response, $args) { // {mode} can be any word on which you can decide what data to send back. The format is critical for compatibility with FullCalendar.
$start_date = Get("start", "invalid_date");
$end_date = Get("end", "invalid_date");
//we need to assign at minimum values to: 'title', 'start' (and optionally 'end')
$sql = "SELECT `timeslotgroup_id` AS id, `timeslotgroup_name` AS 'title', DATE_FORMAT(slot_datetime_start,'%Y-%m-%dT%H:%i:%s') as 'start', "DATE_FORMAT(slot_datetime_end,'%Y-%m-%dT%H:%i:%s') as 'end' FROM `timeslotgroups` WHERE slot_datetime_start BETWEEN '$start_date' AND '$end_date';";
$json = ExecuteJson($sql);
$response = $response->write($json);
return $response;
});
Second, create Custom File showcalendar.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<script src='plugins/fullcalendar-5.3.2/lib/main.js'></script>
<link href='plugins/fullcalendar-5.3.2/lib/main.css' rel='stylesheet' />
<script src='plugins/fullcalendar-5.3.2/lib/locales/en.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
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,
eventClick: function(info) { // Optionally show a modal dialog to edit event on click
$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'AddBtn',url:'TimeslotsView/'+info.event.id})); // replace "TimeslotsView" by your page to display
},
events: 'api/schedule/events', //This picks up events via JSON calls. You can use other words in place of "events" to convey different requests.
});
calendar.setOption('locale', 'en');
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
That’s it!