FullCalendar, apply event background color to event limit popup?

Question

How do I apply the event background color when events are displayed in the event limit pop up, as shown below. Presently, I am dynamically applying background color inside of the eventAfterRender() call. As you can see, it works - except for when the events are being displayed in the popup.

var initialize_calendar;
var current_path = window.location.pathname;
initialize_calendar = function(){
    $('.calendar').each(function(){

        var calendar = $(this)
        calendar.fullCalendar({
            header: {
                left: 'prev, next today',
                center: 'title',
                right: 'month, agendaWeek, agendaDay'
            },
            selectable: true,
            selectHelper: true,
            editable: true,
            eventLimit: true,
            events: current_path + ".json",
            eventAfterRender: function(event, element) {
                var current_user = event.current_user_id
                var driver = event.driver_id
                var date = event.start
                var date_format = date.hour() === 0 ? "dddd, MMMM Do YYYY" : "dddd, MMMM Do YYYY, h:mm:ss a"
                console.log(date.format(date_format));
                // console.log(date.hour())
        $(element).popover({
                    html: true,
                    trigger: "hover",
                    container: 'body',
                    title: event.carpool,
                    content:    '<strong>Event:</strong> ' + event.title + '<br>' +
                                        '<strong>Start:</strong> ' + event.start.format(date_format) + '<br>' +
                                        '<strong>Driver:</strong> ' + event.driver + '<br>' +
                                        '<strong>Place:</strong> ' + event.place + '<br>' +
                                        '<strong>Address:</strong> ' + event.address, 
                    placement:'top'
                })

                if(current_user === driver) {
                    element.css('background-color', 'green');
                } else {
                    element.css('background-color', 'blue');
                }
            }

        });
    })
};
$(document).on('ready', initialize_calendar);

Oh, as you might expect - the popover doesn't work for events inside of the limit popup either.

Styles and event listeners are not being applied to events inside of the event limit popup...

Answer 1

使用eventRender而不是eventAfterRender。