FullCalendar,将事件背景颜色应用于事件限制弹出窗口?

时间:2016-08-17 20:37:33

标签: javascript jquery fullcalendar

如果在弹出的事件限制中显示事件,如何应用事件背景颜色,如下所示。目前,我在eventAfterRender()调用中动态应用背景颜色。如您所见,它可以工作 - 除了在弹出窗口中显示事件的时间。

enter image description here

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

哦,正如您所料 - 弹出窗口也不适用于限制弹出窗口内的事件。

样式和事件侦听器未应用于事件限制弹出窗口内的事件...

1 个答案:

答案 0 :(得分:1)

使用eventRender而不是eventAfterRender。