Question

我正在FullCalendar 4中使用Google日历数据，并且一切都显示正常，但是在弄清楚如何对悬停事件使用引导弹出窗口时遇到了麻烦。我已经尝试了很多在网上找到的不同方法，但是它们要么抛出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。我想念什么？

Answer 1

感谢ADyson。在评论中，他询问我的所有事件是否都具有description属性，而没有。我删除了对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中工作？

2 个答案: