fullcalendar popover not working with event icons

Question

Trying to render dynamic events with icon and popover. Cannot get the popover and icon to work at the same time. I tried a few approaches. Only the first eventRender function works. Here is the code.

$(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

You've got two separate eventRender functions...that isn't going to work. When you list the options for fullCalenadar like that you're defining a JS object containing lots of named properties - one for each option.

As per standard JS behaviour, if you specify the same property twice in an object, that isn't valid - it simply uses the last one you wrote. Property names in an object must be unique, otherwise the code has no way to distinguish between them.

So what you need to do is simply combine your separate eventRender options into one:

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