FullCalendar EventRender Issue

Question

I'm trying to get popovers to display the event information using FulCalendar 3.9.0 JQuery 3.3.1 and Bootstrap 4.1.0. When I try replacing the following code:

        eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, '_blank', 'width=700,height=600');
        return false;
    }

as demonstrated by this online demo with:

    eventRender: function(eventObj, $el) {
    $el.popover({
        title: eventObj.title,
        content: eventObj.description,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
    });
},

The following code displays the events drawn from various Google Calendars without any issue before that change is made:

    $(document).ready(function() {

// Initialise the main calendar instance
$('#fullcalendar-instance').fullCalendar({
    googleCalendarApiKey: 'MyAPIkey',
    eventSources: [
        {
            googleCalendarId: 'gCalID-1',
            color: 'green',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-1'
        },
        {
            googleCalendarId: 'gCalID-2',
            color: 'blue',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-2'
        },
        {
            googleCalendarId: 'gCalID-3',
            color: 'orange',   // an option!
            textColor: 'black', // an option!
            className: 'my-event-3'
        }
    ],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'prevYear,nextYear',
    },
    titleFormat: 'MMM YYYY',
    dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    bootstrapFontAwesome: {
        close: 'fa-times',
        prev: 'fa-angle-left',
        next: 'fa-angle-right',
        prevYear: 'fa-angle-double-left',
        nextYear: 'fa-angle-double-right'
    },
    timezone: 'Europe/London',
    defaultView: 'month',
    themeSystem: 'bootstrap4'
})

});

No errors are displayed in the console as far as I can see. It is just that all the calendar events fail to be displayed.

Any assistance would be appreciated.

https://stackoverflow.com/questions/49774405/fullcalendar-google-calendar-events-eventrender yesterday you said this worked nicely. Was that not true? — ADyson, Apr 13 '18 at 13:15
Also this appears to more or less be a duplicate of https://stackoverflow.com/questions/49797431/fullcalendar-popper-js-integration-issue ? Please don't post the same question twice. — ADyson, Apr 13 '18 at 13:17
Anyway, have you checked your network tab to see if the ajax calls to google are still taking place, and are returning valid JSON data containing events? That would be the first thing to check. It sounds very unlikely but perhaps there is some kind of bug which is stopping them rendering properly. To narrow that down we first need to make sure we're actually getting some data back, so we can be sure it's not an ajax issue or something related to that. — ADyson, Apr 13 '18 at 13:20
Apologies for not having made it clear. I've updated the topic [https://stackoverflow.com/questions/49774405/...](https://stackoverflow.com/questions/49774405/fullcalendar-google-calendar-events-eventrender) to clarify that the solution works for rendering tooltips for a single calendar. — ridgedale, Apr 14 '18 at 06:43
Apologies also for the duplication. As indicated above simply replacing the eventClick function with the eventRender function causes all calendar events to disappear when attempting to render events from multiple Google Calendar sources. When I check the network tab the data appears to be being returned: the callbacks for each of the 3 calendars display a green dot. — ridgedale, Apr 14 '18 at 07:10
And do the responses contain any data for the dates the calendar is displaying? In the network tab you should be able to click on the request to drill into it and see the response (at least you can in Firefox and Chrome's tools). I'm being pedantic but we need to just rule out the possibility there aren't any events. I can't see your data or your real calendar IDs so I can't check myself. — ADyson, Apr 14 '18 at 07:26
Identical data is being returned for the [Multiple Calendar](https://thehanneys.uk/test-cal-03-styled-multiCal-tooltips-mx.php) version as for the [Single Calendar](https://thehanneys.uk/test-cal-01-styled-singleCal-tooltips-mx.php) working version as far I can see. — ridgedale, Apr 14 '18 at 08:18
Surely you should have more data? e.g. maybe 3 different requests, one for each calendar? — ADyson, Apr 14 '18 at 09:27
Just realised the single calendar with the tooltips is also not working properly. Here is a [version](http://thehanneys.uk/test-cal-02-styleUpdated-multiCal-mx.php) that displays all the data correctly with tooltips removed for the events. — ridgedale, Apr 14 '18 at 09:43
Just had a play with your page, destroying and re-creating the calendar (from the console) with/without tooltips. That really is a bizarre issue. I'm afraid it's stumped me, not sure how to resolve that without a great deal more investigation. Something somewhere seems to be silently failing. I did manage to show that it's not related specifically to events which come google calendar though. It seems to be a problem no matter how you define the events. That's logical because by the time the "eventRender" stage is reached, the source of the events is basically irrelevant. — ADyson, Apr 16 '18 at 09:04
Thank you for all your assistance, ADyson. It looks like the popover.js plugin is no longer compatible to display tooltips from a GoogleCalendarId. I'll have to try an alternative. — ridgedale, Apr 25 '18 at 05:52
No problem. Like I said its not specifically google events, it's any Fullcalendar event as far as I can see. — ADyson, Apr 25 '18 at 06:42
I've been looking at trying to replace popover with bootstrap tooltips or qtip2 but can't get either of them to display the event.description. :( — ridgedale, Apr 25 '18 at 12:20
The code used for Bootstrap tooltips is: `code` eventRender: function(event, element) { $(element).tooltip({title: event.title, content: event.description}); }, eventClick: function(event) { if (event.url) { return false; } } — ridgedale, Apr 25 '18 at 12:21
The code used for qtips2 is: `code` eventRender: function(event, element) { element.qtip({ title: event.title, content: event.description, className: event.className, position: { my: 'top left', at: 'bottom left', viewport: $(window), adjust:{ method: 'flipinvert', x: 0, y: 3 } }, show: 'click' }); }, eventClick: function(event) { if (event.url) { return false; } } — ridgedale, Apr 25 '18 at 12:23
qtip should work, since it's mentioned in the fullCalendar docs. Try simply `element.qtip({ content: event.description });` in the eventRender to start with, then it's really straightforward and as per the example in the fullCalendar docs. Obviously you have to have included the qTip library in your page...I'm sure you'll have done that but worth mentioning. By the way you didn't say what exactly goes wrong with using the qTip approach - error, or just not displaying, or makes the event disappear again? What's the behaviour you're seeing? — ADyson, Apr 25 '18 at 13:15
Here's a link to the [Boostrap Tooltips](https://thehanneys.uk/test-cal-03-styled-multiCal-bs-tooltips-mx.php) implementation, which all just display the title and here's a link to the [Qtips2](https://thehanneys.uk/test-cal-03-styled-multiCal-qtips-mx.php) implementation that only displays the descriptions (on the HNU entries, the others don't have entered descriptions) — ridgedale, Apr 25 '18 at 15:32
Btw, the Qtips2 version I have used is the basic one comprised of just 3.0.3 stable, core styles and No libraries. When I tried using downloading a version containing all the styles and features no events were displayed at all. — ridgedale, Apr 25 '18 at 16:16

FullCalendar EventRender Issue

0 Answers0