jquery - 如何使用 fullCalendar 和 Bootstrap 获取背景颜色

Question

我有一个主要是 Bootstrap 的网站，但是 fullCalendar 太棒了，我无法避免使用它。

不幸的是，Bootstrap UI 似乎覆盖了事件背景颜色。我尝试使用 fullCalendar 指令。我尝试了 CSS，甚至尝试在加载后使用 jQuery 添加 CSS。什么都不起作用，所有事件总是白色的。还有其他人遇到过这个问题吗？如何为事件分配彩色背景？

CSS

.fc-event-vert .fc-event-bg {
    background:#def;
}

jQuery 尝试

$('.fc-event-vert .fc-event-bg').css('background','#def');

我的整个配置如下所示:(注意不起作用的 eventColor 标签)

    $('#calendar_div').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek'
    },
    defaultDate: yyyy+"-"+mm+"-"+dd,
    defaultView: 'agendaWeek',
    allDaySlot: false,
    minTime: '08:00:00',
    maxTime: '20:00:00',
    slotDuration: '00:15:00', 
    defaultTimedEventDuration: '01:00:00',
    editable: true,
    selectable: true,
    select: function (start,end) {
        var sdate = start.format();
        var edate = end.format();
        var thisdate = sdate.substr(0,10);
        var stime = sdate.substr(11);
        var etime = edate.substr(11);
        $.colorbox({
            href: "/appointments/create/"+thisdate+"/"+stime+"/"+etime+"/"+thispatient,
            iframe: false,
            width: "600",
            height: "528px",
            scrolling: true,
            escKey: true,
            overlayClose: true,
            title: "",
            close: "X",
            onClosed: function() {
            }
        });
    },
    events: '/appointments/get_appts',
    eventColor: '#fde',
    eventDrop: function (event) {
        var id = event.id;
        var sdate = event.start.format();
        var edate = event.end.format();
        $.ajax({ url: '/appointments/updateappt/'+id+'/'+sdate+"/"+edate });
    },
    eventClick: function(event, jsEvent, view) {
        var id = event.id;
        $.ajax({ url: '/appointments/getappt/'+id,
                success: function(mydata) {
                    var data = JSON.parse(mydata);
                    $.colorbox({
                        href: '/appointments/create/'+data.sdate+'/'+data.stime+'/'+data.etime+'/'+data.uid,
                        iframe: false,
                        width: "600",
                        height: "528px",
                        scrolling: true,
                        escKey: true,
                        overlayClose: true,
                        title: "",
                        close: "X",
                        onClosed: function() {
                        }
                    });
                }
        });
    }

});

Answer 1

我在设置 fullCalendar 事件的样式时遇到了一些麻烦，因为涉及到一些内联样式。我发现更改事件颜色的最佳方法是使用 fullCalendar API 选项。

当您可以为整个日历或特定事件设置颜色时。我发现当我因为外部样式表(如 twitter-bootstrap)而有很多冲突的样式时，为特定事件设置颜色是解决它的最佳方法。然后，FullCalendar 将在每个事件上使用内联样式来设置背景颜色，这样其他样式表就不会覆盖它。

这是文档:

http://arshaw.com/fullcalendar/docs/event_rendering/eventColor/

http://arshaw.com/fullcalendar/docs/event_rendering/eventBackgroundColor/

http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/