fullcalendar failure parsing json when adding eventRender with popper.js

Question

I'm trying to add a FullCalender to my page with the events from a Google Calendar. When I don't include the eventRender, it shows the events, but takes me to Google Calendar when I click on them. When I add the eventRender to get the event information to popup when hovering over the events, I get the failure parsing JSON error and the events don't render on the calendar at all.

This is the code I'm using (note that the API key and calendar ID are filled in in the actual code):

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let calendarEl = document.getElementById("calendar");

        let calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ["dayGrid", "timeGrid", "list", "interaction", "googleCalendar"],
            selectable: true,
            googleCalendarApiKey: "<API KEY>",
            events: {
                googleCalendarId: "<my-calender-id>",
                className: "gcalEvent"
            },
            eventRender: function(eventObj, $el) {
                $el.popover({
                  title: eventObj.title,
                  content: eventObj.description,
                  trigger: 'hover',
                  placement: 'top',
                  container: 'body'
                });
              }
        });

        calendar.render();
    });
</script>

I'm pretty new to HTML and also StackOverflow so if this is not enough information to parse out a solution let me know what I need to add.

please tell us exactly what your error message says, and exactly what line it occurs on. I can't immediately see why adding an eventRender callback would cause a JSON error. — ADyson
Error message: "Failure parsing JSON {message: "Failure parsing JSON", xhr: XMLHttpRequest}" occurs on fullcalendar/core/main.js:5224 — 2abysses
Sounds like an error reading the events potentially. To be clear, if you remove the eventRender code does it start working again? Sounds unlikely, but please test that, if that's what you believe to be the cause — ADyson
Yes, if I remove the eventRender code the events show up in the calendar again. When I add the code, they don't show up in the calendar at all. — 2abysses
Ok I think I spotted an issue: You're using fullCalendar v4. Read the eventRender documentation for version 4: fullcalendar.io/docs/eventRender . Notice how the function signature is not the same any more. Everything is contained within one info parameter. Not sure how that would result in a JSON/XHR issue, but nonetheless it's definitely a problem for you, because eventObj won't contain the things you think it does, and $el will be undefined). You need to refactor your eventRender code to use the new object structure (as described in the docs). — ADyson

Nelson Inalbon Nelson Inalbon · Accepted Answer · 2019-07-07T22:36:52

I think the problem is that you are receiving something that does not match the structure that should.

Try:

events: [ { title: 'My Event', start: '2019-07-07', description: 'This is a cool event' } ],

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

It work for me, when i only use info, then i add the event title... just an example. Good luck

fullcalendar failure parsing json when adding eventRender with popper.js

2 Answers