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();

Answer 1

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();

Answer 2

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'
            });