JSON parsing error in FullCalendar integration

SRanade · October 20, 2020, 5:36pm

I’ve tried to use the code shared in https://discourse.hkvstore.com/t/integrating-fullcalendar-and-populating-from-json/2806/1
but I consistently get “Failure Parsing JSON” error when loading page. The calendar object appears fine, and manually added entries appear in it.

The JSON side code is in ListEvents.php:

<?php $from= Get("start"); $to= Get("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(DATE_ADD(slot_datetime_start, INTERVAL 1 HOUR),'%Y-%m-%dT%H:%i:%s') as 'end' FROM `timeslotgroups` WHERE slot_datetime_start BETWEEN '$from' AND '$to';"; echo ExecuteJson($sql); ?>

when manually going to the actual JSON URL:
localhost/classroom/ListEvents?start=2020-09-13T00%3A00%3A00%2B05%3A30&end=2020-11-08T00%3A00%3A00%2B05%3A30
I get the correct output:
[{“id”:1,“title”:“Monday”,“start”:“2020-09-14T19:00:00”,“end”:“2020-09-14T20:00:00”},{“id”:2,“title”:“Tuesday”,“start”:“2020-09-15T11:00:00”,“end”:“2020-09-15T12:00:00”}]

I’ve tried every variation of date format, etc, but cannot understand why JSON parsing fails. I suppose it is the JSON data being returned which is problematic. I have ticked "no header/footer " in the Generate screen for ListEvents.php. Is there somewhere else that I have to remove header/footer also?

SRanade · October 20, 2020, 5:46pm

The Calendar display page is like this, and displays the calendar normally:

//change the folder here to the unzipped files

SRanade · October 20, 2020, 5:51pm

Correction:
url: ‘/classroom/ListEvents’,

SRanade · October 20, 2020, 6:00pm

In Chrome F12 Console I get:
main.js:6430 Failure parsing JSON {message: “Failure parsing JSON”, xhr: XMLHttpRequest}
under xhr:
responseURL: “h…//localhost/yogastudio/ListEvents?start=2020-08-31T00%3A00%3A00%2B05%3A30&end=2020-10-11T00%3A00%3A00%2B05%3A30”
response: "â†µâ†µâ†µâ†µâ†µ<meta name=“viewport” content=“width=…” (Show more 30KB copy)
responseText: “â†µâ†µâ†µâ†µ<met” (Show more 30KB copy)

I’m trying to give maximum info for diagnostic help. Apologies for splitting it across several posts.

Please guide.

SRanade · October 21, 2020, 4:35pm

I’ve made the code to bare minimum like this:
File GroupsCalendar.php shows calendar:

File ListEvents.php returns dumy JSON data, and I disable generation of header/footer when generating scrips:

<?php $json = '[{"title":"Monday","start":"2020-10-14T19:00:00","end":"2020-10-14T20:00:00"}]'; echo $json; ?>

On the URL: ListEvents?start=2020-09-13T00%3A00%3A00%2B05%3A30&end=2020-11-08T00%3A00%3A00%2B05%3A30
I get a clean JSON output on the page. But when I right click the page and View Page Source then I get a full HTML 30K page with the actual JSON output in the middle.

This is the problem: the entire page HTML code is being returned as JSON data!

But I cannot find where to disable or delete this header/footer in the Page Source! There is no HTML file anywhere.

If I disable Include Common Files for the table then the entire page disappears and I get error: “Route ‘ListEvents’ not found.”

I also tried to create API_Action function like this:
$app->get(‘/getCalendarEvents/{start_date}/{end_date}’, function ($request, $response, $args) {
$response = ‘[{“title”:“Monday”,“start”:“2020-10-14T19:00:00”,“end”:“2020-10-14T20:00:00”}]’;
return $response;
});
But the JSON call gives 404 Error.

How to get the proper JSON return data without the page header/footer coming in? (I’m using PHPMaker 2021). Please help!

SRanade · October 23, 2020, 8:43am

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!

josejad · October 23, 2020, 9:34am

That’s great. Thanks for sharing.

ddiaz2380 · January 6, 2021, 10:02pm

It shows me the calendar and the events in the view that I relate to the calendar. But … I can’t make the user by pressing the day display for loading. Right now it only works as a reservation view, but I can’t add data by pressing on the calendar.

josejad · January 12, 2021, 2:43pm

Have you tried to modify the showed modal dialog with the pageadd?

eventClick: function(info) {
$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'AddBtn',url:'YOURPAGE_viewADD.php?id='+info.event.id}));
},

ddiaz2380 · January 17, 2021, 10:23pm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8' />
<link href='plugins/fullcalendar/lib/main.css' rel='stylesheet' />
<script src='plugins/fullcalendar/lib/main.js'></script>
<script src='plugins/fullcalendar/lib/locales/es.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'es';
var calendarEl = document.getElementById('calendario');
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
selectable: true,
editable: true,
eventClick: function(info) { // Optionally show a modal dialog to edit event on click
$('#eventUrl').attr('href',ew.modalDialogShow({lnk:this,btn:'AddBtn',url:'citacalendarview/'+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', 'es');
calendar.render();
});
</script>
</head>
<body>

<div id='calendario'></div>

</body>
</html>

What I want is to be able to click on the calendar and open the view that I have to load the record, because just as it only serves to view the records, it loses the power of having it running if I cannot load the record when doing click on the calendar.

josejad · January 18, 2021, 8:48am

ddiaz2380 wrote:

What I want is to be able to click on the calendar and open the view that I have to load the record, because just as it only serves to view the records, it loses the power of having it running if I cannot load the record when doing click on the calendar.

Change “citacalendarview” for “citacalendaradd”

mpol_ch · January 27, 2021, 5:56pm

Hi,

is there a howto?
I am not getting the view of calendar.
Or where can I find the database table of calendar?mpol_ch

josejad · February 2, 2021, 8:46am

Check:https://discourse.hkvstore.com/t/integrating-fullcalendar-and-populating-from-json/2806/1

noorshiam · February 17, 2021, 1:13am

SRanade wrote:

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.

Hi,
How to do this with PHPMaker version 2020 ??

ddiaz2380 · July 24, 2021, 8:26pm

josejad wrote:

Change “citacalendarview” for “citacalendaradd”

What I need is that … when the user clicks on a day on the calendar, the form popoup will be displayed.

josejad · August 5, 2021, 6:26am

ddiaz2380 wrote:

What I need is that … when the user clicks on a day on the calendar, the form
popoup will be displayed.

Just check the real page you need from the regular menu, copy the name of the page and paste it in the calendar script.If using v2021, just load your page and copy the name, probably now it will be something like: “CitaCalendarAdd”