3

Summary

I have setup fullcalendar and I'm trying to show data in it using the JSON event source as described in their documentation here.

I keep getting the following failure message Failure parsing JSON.

Things I've tried

This is the JSON which will trigger the failure message [{"title":"Lorem Ipsum","start":"2019-04-01","end":"2019-04-02"},{"title":"The Test","start":"2018-09-01","end":"2018-09-02"}]

I am using fullcalendar version 4.0.2.
I have validated the json my PHP code returns in a linter.
I have added a Content-Type: application/json header to the json response.
I have tried using the eventDataTransform hook to return some sample JSON found in the fullcalendar docs here (see code in edit history)

~~The strange thing is that when I place the above JSON directly in my javascript in the events option it does work.~~ EDIT: As pointed out by Jaromanda X and Quentin this is a javascript array and not JSON.

Code

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        defaultView: 'dayGridMonth',
        locale: 'nl',
        events: '/fullcalendar/json.php'
    });

I would expect that my json could be parsed as the response is the same as what I give directly to the events option

Additional info

Contents of the json.php file

<?php
header('Content-Type: application/json');
echo json_encode([
    [
        'title' => 'Lorem Ipsum',
        'start' =>  '2019-04-01',
        'end' =>  '2018-04-02'
    ],
    [
        'title' => 'The Test',
        'start' =>  '2018-09-01',
        'end' =>  '2018-09-02'
    ]
]);exit;

I have tried changing the method to GET which did not help.

I have attached a screenshot of the response I see in the network tab of the inspector JSON response in inspector

Smit
  • 51
  • 1
  • 7
  • 1
    `events: [{"title":"Lor .... }]` isn't JSON but `events: '[{"title":"Lorem ... 9-02"}]'` is – Jaromanda X Apr 16 '19 at 08:52
  • 2
    "The JSON in the line below " — That's a JavaScript array, not JSON. http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/ – Quentin Apr 16 '19 at 08:53
  • I suspect `method: 'POST',` should be `method: 'GET',` but that's just a guess. Is your "fullcalendar/json.php" endpoint expecting a POST request? – Rocky Sims Apr 16 '19 at 09:07
  • @JaromandaX Thank you for your comment. That would explain why there is no failure to parse that 'json' because it isn't. – Smit Apr 16 '19 at 09:07
  • I notice that in the `eventDataTransform` handler function you are returning an array with one object in it. I'm pretty sure you need to return just the object (not wrapped in an array). – Rocky Sims Apr 16 '19 at 09:31
  • @RockySims I have tried this but it does not remove the error. – Smit Apr 16 '19 at 10:14
  • try using `events: '/fullcalendar/json.php'`. Fullcalendar should handle this call. Remember to change the date of your events or you may receive empty response. Also note the network tab of the browser to see which daterange full calendar attache to the end of your /fullcalendar/json.php url. – khan Apr 16 '19 at 11:09
  • @khan Thank you for the suggestion, but unfortunately this did not help. I will try to strip as much of the surrounding code as I can and see if I can get it to work that way. Should I find the answer I will update the post. – Smit Apr 16 '19 at 12:38
  • what are you trying to achieve with the eventDataTransform function? – John Apr 16 '19 at 12:43
  • @John Originally I did not intend to use this, but when I saw the `failure to parse json` error and when I was unable to see an error in my json response. I wanted to rule things out so I tried to just give fullcalender the object I thought it wanted in that event hook. However that did not work out. – Smit Apr 16 '19 at 12:50
  • You have two `events` keys, but only last one will be used – Justinas Apr 16 '19 at 12:51
  • @Justinas I placed both events keys in the code so you could more easily see what I tried. I have updated the code to prevent further confusion, if anyone who might have this same problem is reading this please check the edits to my post for the older code (it may or may not help). – Smit Apr 16 '19 at 12:59

2 Answers2

2

I'm afraid my solution probably won't be of much use to anyone else but here it is.

The error was caused due to the following line of js code in our main js file.

  if($('table').length > 0){
         $('table').wrap('<div class="table-scroll"></div>');
    }

This line messed with the HTML ouput that fullcalender generates which then threw the failure parsing json error.

Smit
  • 51
  • 1
  • 7
  • 1
    Even though it's likely no one else will have this exact cause, just knowing generally how you solved it may prove helpful to someone. Thanks for taking the trouble to post your solution. – Rocky Sims Apr 17 '19 at 12:34
0

I tried your code in a php page and call in fullcalendar as events: '/fullcalendar/json.php' i don't know whats causing problem for you. Works perfect.

<?php
 header('Content-Type: application/json');
 echo json_encode([
   [
    'title' => 'Lorem Ipsum',
    'start' =>  '2019-04-16T13:00:00',
    'end' =>  '2019-04-17T14:00:00'
   ],
   [
    'title' => 'The Test',
    'start' =>  '2019-04-16T10:00:00',
    'end' =>  '2019-04-17T13:00:00'
   ]
]);

However consider your dates too. Your start is 2019 and end is 2018. Also insert time to see where your events are.

khan
  • 1,099
  • 1
  • 11
  • 21
  • I have also taken just the code needed for fullcalendar and it works. The problem lies somewhere else. Should I find the solution I'll post it here. Thank you for taking the time to look at my issue. – Smit Apr 16 '19 at 14:22