Question

我在我的网站上使用fullcalendar，但现在我想设置营业时间的颜色，但我没有成功。现在我的日历的背景颜色是橙色，商业颜色有点深橙色。现在我想将它改成另一种颜色（例如：红色）。但是在fullcalendar.css中，我发现非商业时间背景颜色有一行：.fc-nonbusiness。我怎么能改变它？谢谢。

以下是我的日历代码：

# CSS Code

body {
    padding-top: 70px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

#calendar {
    max-width: 100%;
}

#calendar.agenda{
    background-color: #FF9900;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

#calendar .fc-agendaWeek-view .fc-today, #calendar .fc-agendaDay-view .fc-today, #calendar .fc-month-view .fc-today {
    background: #C0C0C0 !important;
}

# Fullcalendar JS

$('#calendar').fullCalendar({
    locale: "es",
    header: {
        left: 'prev, next today',
        center: 'title',
        right: 'month, agendaWeek, agendaDay'
    },
    views: {
        week: {
            columnFormat:'ddd D',
        },
    },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    selectable: true,
    selectHelper: true,
    minTime: "09:30:00",
    maxTime: "20:00:00",
    slotLabelFormat: "HH:mm",
    slotDuration: "00:30:00",
    slotLabelInterval: "00:30:00",
    slotWidth: 15,
    businessHours: {
        start: '13:30',
        end:   '17:00',
        dow:  [1,2,3,4,5,6,0],
    },
    viewRender: function(view, element) {
        $("#calendar").addClass('agenda');
    }
});

Answer 1

嗯，好吧，我找到了这样的解决方案：

/** Updated code */

#calendar .fc-bgevent {
    background: #000000;
}

......

events: [
    {
        start: '13:30',
        end: '17:00',
        dow:[1,2,3,4,5,6,0],
        rendering: 'background'
    },
]

我删除了营业时间并通过背景事件重置背景颜色

更改Fullcalendar的营业时间颜色

1 个答案: