How do I get Bootstrap popovers to work in FullCalendar 4?

Question

I'm using Google calendar data in FullCalendar 4 and everything is displaying fine, but I'm having trouble figuring out how to use bootstrap popovers for events on hover. I've tried a bunch of different things I found online, but it all either throws JSON errors or does nothing at all (probably because most of it is for previous versions).

        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar' ],
            themeSystem: 'bootstrap',
            googleCalendarApiKey: 'xxxxxxx',

            events: {
                googleCalendarId: 'xxxxxxx'
            },

            eventRender: function(event, element) {
                $(element).popover({
                    title: event.title,
                    placement:'top',
                    html:true,
                    trigger : 'hover',
                    animation : 'false',
                    content: event.description,
                    container:'body'
                }).popover('show');
            },

            height: 650,
            header: {
                left: 'title',
                center: '',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
            }
        });

        calendar.render();

This particular eventRender function doesn't throw any errors, but it doesn't do anything either. The only thing happening on mouseover is the addition of fc-allow-mouse-resize to the anchor tag in the particular event. What am I missing?

SOLUTION (removed event.description from popover content)

            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar'],
                themeSystem: 'bootstrap',
                googleCalendarApiKey: 'xxxxxxx',

                events: {
                    googleCalendarId: 'xxxxxxx'
                },

                eventRender: function(info) {
                    var start = info.event.start;
                    var end = info.event.end;
                    var startTime;
                    var endTime;

                    if (!start) {
                        startTime = '';
                    } else {
                        startTime = start;
                    }

                    if (!end) {
                        endDate = '';
                    } else {
                        endTime = end;
                    }

                    var title = info.event.title;
                    var location = "at " + info.event.extendedProps.location;
                    if (!info.event.extendedProps.location) {
                        location = '';
                    }

                    $(info.el).popover({
                        title: title,
                        placement:'top',
                        trigger : 'hover',
                        content: startTime + " to " + endTime + " " + location,
                        container:'body'
                    }).popover('show');
                },

                eventClick: function(info) {
                    info.jsEvent.preventDefault(); // don't let the browser navigate
                    if (info.event.url) {
                        window.open(info.event.url);
                    }
                },

                height: 650,
                header: {
                    left: 'title',
                    center: '',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
                }
            });

            calendar.render();

I suggest you check the eventRender v4 documentation: https://fullcalendar.io/docs/eventRender , especially what it says about the callback signature - i.e. the parameters being passed into the callback function. You are using the v3 signature. — ADyson, Jul 03 '19 at 09:54
This is the closest I can come up with, gets "failure parsing JSON" `eventRender: function(info) { info.el.popover({ title: info.event.extendedProps.title, placement:'top', trigger : 'hover', content: info.event.extendedProps.description, container:'body' }).popover('show'); },` — V1xIII, Jul 03 '19 at 15:03
Ok so 1) Judging by the original code I'd expect the .popover() method is a jQuery method? So logically it would need to be `$(info.el).popover(` in the new version (because in v4 the element `el` is now a native DOM element object not a jQuery object). And 2) Since `title` is a [standard property of an event object in fullCalendar](https://fullcalendar.io/docs/event-object) I don't think you should be looking for it in extendedProps - `info.event.title` should give you the data you need. So again in both these cases you just need to check the docs in a bit more detail, I think. — ADyson, Jul 03 '19 at 15:37
You were right about the title thing. I tried using that jQuery selector, but I'm still getting "Failure parsing JSON". Interesting fact: If I copy over the example eventRender code from the docs, I still get that JSON error. Looking like I'm gonna have to have my boss take a crack at it. — V1xIII, Jul 03 '19 at 15:56
obvious question...do (all) your events definitely have a `description` property which is populated? Perhaps it's failing to read that from one or more events. Maybe try with just the title property, since they should all have that as a minimum. — ADyson, Jul 03 '19 at 16:09
Ha! That was it! The first event lacked a description and it was breaking the whole thing. — V1xIII, Jul 03 '19 at 16:23
No worries! So maybe you just need to check whether the description is available before you try to use it. — ADyson, Jul 03 '19 at 16:25
Hey @V1xIII ...this was a good question...do you mind adding your working code with a subtitle of SOLUTION below what you already have...Im sure it would help people in the future...thanks — Marvel Moe, Jul 26 '19 at 20:12
@Marvel Moe - I posted the full block of code I ended up using as you requested. — V1xIII, Jul 29 '19 at 13:13
Thanks V1xIII...I had to replace the $ with jQuery and I also had to format the date using https://fullcalendar.io/docs/v1/formatDate — Marvel Moe, Jul 30 '19 at 20:03
i do not even get the bootstrap theme to work in 4.3.1. i have `themeSystem: bootstrap` and importet the `import '@fullcalendar/bootstrap/main.css';` — Gobliins, Nov 26 '19 at 14:31

score 6 · Accepted Answer · answered Nov 21 '19 at 19:27

Thanks to ADyson. In the comments he asked if all of my events had a description property, and they did not. I removed the reference to event.description and it solved my problem. My final code is below.

            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar'],
                themeSystem: 'bootstrap',
                googleCalendarApiKey: 'xxxxxxx',

                events: {
                    googleCalendarId: 'xxxxxxx'
                },

                eventRender: function(info) {
                    var start = info.event.start;
                    var end = info.event.end;
                    var startTime;
                    var endTime;

                    if (!start) {
                        startTime = '';
                    } else {
                        startTime = start;
                    }

                    if (!end) {
                        endDate = '';
                    } else {
                        endTime = end;
                    }

                    var title = info.event.title;
                    var location = "at " + info.event.extendedProps.location;
                    if (!info.event.extendedProps.location) {
                        location = '';
                    }

                    $(info.el).popover({
                        title: title,
                        placement:'top',
                        trigger : 'hover',
                        content: startTime + " to " + endTime + " " + location,
                        container:'body'
                    }).popover('show');
                },

                eventClick: function(info) {
                    info.jsEvent.preventDefault(); // don't let the browser navigate
                    if (info.event.url) {
                        window.open(info.event.url);
                    }
                },

                height: 650,
                header: {
                    left: 'title',
                    center: '',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
                }
            });

            calendar.render();

score 1 · Answer 2 · answered Feb 20 '20 at 08:36

I had same problem and this worked like charm. Thanks.

Just a small add: endDate should be endTime in the code part below

if (!end) {
    endDate = '';
} else {
    endTime = end;
}

Btw I found it easier to write it as:

var endTime  = (!end) ? '' : end;

I would like to add something for Date Format. Maybe somebody can find it useful. I used:

var end = info.event.end.toLocaleString('fr-FR');

even more specialized:

var end = info.event.end.toLocaleString('fr-FR',{
                day: '2-digit',
                month: 'short',
                hour: '2-digit',
                minute: '2-digit'
            });

How do I get Bootstrap popovers to work in FullCalendar 4?

2 Answers2