如何让 Bootstrap 弹出窗口在 FullCalendar 4 中工作？

Question

我在 FullCalendar 4 中使用 Google 日历数据，一切都显示正常，但我无法弄清楚如何使用 bootstrap 悬停事件的弹出窗口。我已经尝试了很多我在网上找到的不同的东西，但它们要么抛出 JSON 错误，要么什么都不做（可能是因为大部分都是针对以前的版本）。

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

这个特定的 eventRender 函数不会抛出任何错误，但它也不会执行任何操作。鼠标悬停时唯一发生的事情是将 fc-allow-mouse-resize 添加到特定事件中的锚标记。我错过了什么？

解决方案（已从弹出窗口内容中删除 event.description）

            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

感谢阿迪森。在评论中，他问我的所有事件是否都有描述属性，他们没有。我删除了对 event.description 的引用，它解决了我的问题。我的最终代码如下。

            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

我遇到了同样的问题，这很有效。谢谢。

只是一个小小的补充：endDate 在下面的代码部分应该是 endTime

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

顺便说一句，我发现写成这样更容易：

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

我想为日期格式添加一些内容。也许有人会发现它有用。我用过：

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

更专业：

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

如何让 Bootstrap 弹出窗口在 FullCalendar 4 中工作？

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

javascript

css

fullcalendar

bootstrap-4

fullcalendar-4