简体   繁体   中英

Change color of business time of Fullcalendar

I'm using fullcalendar in my website, but now i want to set the color of the business time but i don't succeed. Now the background color of my calendar is orange, and the business color is a little deeper orange. Now i want to change it into another color(for ex: red). But in fullcalendar.css i only found there is one line for background color for not-business-time: .fc-nonbusiness. How can i change it? Thank you. 在此输入图像描述

And here is my code of my calendar now:

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

Emm, okay i found a solution like this:

/** Updated code */

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

......

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

i deleted the business hour and reset the background color by a background event

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM