JSON parsing error in FullCalendar integration

SRanade · Post by **SRanade** » Wed Oct 21, 2020 1:36 am

I've tried to use the code shared in http://www.hkvforums.com/viewtopic.php? ... llcalendar
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 · Post by **SRanade** » Wed Oct 21, 2020 1:46 am

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />

//change the folder here to the unzipped files
<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/fr.js'></script>
<script>

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
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,
eventSources: [
{
url: '/yogastudio/ListEvents',
type: 'GET',
error: function() {
alert('there was an error reading the data.');
},
color: '#28A745', // a non-ajax option
textColor: 'white' // a non-ajax option
},
]
,
events: [
{
title: 'All Day Event',
start: '2020-09-16'
} // manually added event appears fine in calendar
]
});
calendar.setOption('locale', 'en');
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

SRanade · Post by **SRanade** » Wed Oct 21, 2020 1:51 am

Correction:
url: '/classroom/ListEvents',

SRanade · Post by **SRanade** » Wed Oct 21, 2020 2:00 am

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: "<!DOCTYPE html>â†µ<html>â†µ<head>â†µ<title></title>â†µ<meta charset="utf-8">â†µ<meta name="viewport" content="width=.................." (Show more 30KB copy)
responseText: "<!DOCTYPE html>â†µ<html>â†µ<head>â†µ<title></title>â†µ<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 · Post by **SRanade** » Thu Oct 22, 2020 12:35 am

I've made the code to bare minimum like this:
File GroupsCalendar.php shows calendar:
<!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>

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'
},
events: 'ListEvents'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

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 · Post by **SRanade** » Fri Oct 23, 2020 4:43 pm

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 · Post by **josejad** » Fri Oct 23, 2020 5:34 pm

That's great. Thanks for sharing.

ddiaz2380 · Post by **ddiaz2380** » Thu Jan 07, 2021 6:02 am

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 · Post by **josejad** » Tue Jan 12, 2021 10:43 pm

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 · Post by **ddiaz2380** » Mon Jan 18, 2021 6:23 am

<!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 · Post by **josejad** » Mon Jan 18, 2021 4:48 pm

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 · Post by **mpol_ch** » Thu Jan 28, 2021 1:56 am

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 · Post by **josejad** » Tue Feb 02, 2021 4:46 pm

Check:

http://www.hkvforums.com/viewtopic.php?f=18&t=48762

noorshiam · Post by **noorshiam** » Wed Feb 17, 2021 9:13 am

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 · Post by **ddiaz2380** » Sun Jul 25, 2021 4:26 am

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 · Post by **josejad** » Thu Aug 05, 2021 2:26 pm

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"