FullCalendar returns "Failure Parsing JSON" when trying to add tooltip

Question

To Fix the issue of parsing, I had to add tooltip.js and popper.js (my stupid head forgot to do so)

My problem now is that it's rendering the events but the tooltip still doesn`t render on hover or click.

I am currently trying to get hover tooltips to work on FullCalendar, but all of the examples that I have found on how to do it (including the official documentation) have failed to help me to do so.

Everytime I load the page, it returns a:

Failure parsing JSON

But opening my php file that feeds it using JSON returns correct json. Below is the code on my calendar page for rendering the calendar, if I take the eventRender out it works fine.

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],
          defaultView: 'dayGridMonth',

          eventRender: function(info) {
                    var tooltip = new Tooltip(info.el, {
                      title: info.event.extendedProps.description,
                      placement: 'top',
                      trigger: 'hover',
                      container: 'body'
                     });
                   },

          eventSources: [
          {
            url: 'json-events-feed.php',
            type: 'POST' // Send post data
          }
          ]  
        });

        calendar.render();
      });

My json-events-feed.php file looks like this:

<?php
require( "config.php" );
try {

    $data = array();
    $data = Event::getList();
    $result_calendar['event'] = $data['results'];
    $result_calendar['totalRows'] = $data['totalRows'];

    $events = array();

    // Fetch results
    foreach ($result_calendar['event'] as $event) {
        $e = array();
        $e['id'] = $event->calendarDateID;
        $e['title'] = $event->title;
        $e['start'] = date( "Y-m-d", $event->eventDate );
        $e['end'] = date( "Y-m-d", $event->eventDate );
        $e['allDay'] = true;
        $e['description'] = "Testando essa bagaca";

        // Merge the event array into the return array
        array_push($events, $e);

    }

    // Output json for our calendar
    echo json_encode($events);
    exit();

} catch (PDOException $e){
    echo $e->getMessage();
}

?>

Giovanni Reboucas Giovanni Reboucas · Accepted Answer · 2019-05-05T19:21:07

To Fix the issue of parsing, I had to add tooltip.js and popper.js (my stupid head forgot to do so)

Now, for the issue of rendering, I found that the css element was not getting it's opacity increased, as such, it DID render, I just couldn't see it. All I did was setting a tag as such:

<style>
.tooltip { opacity: 1; }
</style>

FullCalendar returns "Failure Parsing JSON" when trying to add tooltip

1 Answers