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.