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');
}
});
You can change the color of all events on the calendar like so: var calendar = new Calendar(calendarEl, { events: [ // my event data ], eventColor: '#378006' }); You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red .
You can add any image url to your eventObject by adding the attribute "imageurl" inside of the events definition (if you just want the image, don't specify a title):
We can get start date by getView event with intervalStart. We can get end date by getView event with intervalEnd. var month = $('#calendar'). fullCalendar('getView').
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With