全日历弹出窗口不适用于事件图标

Question

正在尝试使用图标和弹出窗口呈现动态事件。无法让弹出窗口和图标同时工作。我尝试了几种方法。只有第一个 eventRender 函数有效。这是代码。

$(document).ready(function () {
    $('#calendar').fullCalendar({
            timezone: 'local',
            height: 700,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: '2021-07-16',
            navLinks: true,
            eventLimit: true,

            events: [{ %
                    for order in orders %
                } {
                    id: '{{ order.event.id}}',
                    title: '{{ order.event.title }}',
                    start: '{{ order.event.start }}',
                    end: '{{ order.event.end }}',
                    description: '{{ order.event.description }}',
                    backgroundColor: '#b3e6ff',
                    icon: 'calendar-alt',
                },

                { % endfor %
                }
            }
        ],
        eventRender: function (event, element) {
            if (event.icon) {
                element.find(".fc-title").prepend("<i class='fa fa-" + event.icon + "'></i>");
            }
        },
        eventRender: function (eventObj, $el) {
            $el.popover({
                title: eventObj.title,
                content: eventObj.description,
                trigger: 'hover',
                placement: 'top',
                container: 'body'
            });
        },
    });
});```

Answer 1

您有两个单独的 eventRender 函数...这不会起作用。当您像这样列出 fullCalenadar 的选项时，您正在定义一个包含大量命名属性的 JS 对象 - 每个选项一个。

按照标准的 JS 行为，如果您在一个对象中指定相同的属性两次，那是无效的 - 它只是使用您写的最后一个。属性对象中的名称必须是唯一的，否则代码无法区分它们。

所以您需要做的就是将单独的 eventRender 选项合并为一个：

    eventRender: function (eventObj, $el) {
        if (eventObj.icon) {
            $el.find(".fc-title").prepend("<i class='fa fa-" + eventObj.icon + "'></i>");
        }

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

全日历弹出窗口不适用于事件图标

fullcalendar popover not working with event icons

javascript

jquery

popover

fullcalendar

fullcalendar-3