How to add multiple business hours in fullCalendar? - fullcalendar

Question

Is there any way to set multiple business hours, or grey out certain time ranges in FullCalendar's agenda view? I'm searching the google for hours, but I didn't find any working answer.
Here's what I've tried:
businessHours:
[
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
},
{
start: '10:00',
end: '16:00',
dow: [ 6 ]
}]
This is not working. The fullcalendar recognizes this array as a true value, and sets the default value of businesHours.
This works:
businessHours:
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
}
But I want to be able to customize every day's opening hours. Is there any way to solve this? If I could add somehow a css class to certain time ranges that would do it, but I don't know how to grab these time ranges. Render doesn't work, because of agenda view.

Answer 1

I figured out a solution. It is not the best way, to solve this problem, but it is easy to understand and implement, until we don't get a more customizable businessHours() function in an upcoming update.
The code:
events: [
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '16:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '00:00:00+02:00',
end: '8:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
},
{
start: '12:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
}
]
This will put background events in the Calendar, which are not clickable, and looks like businessHours()'s gray out, and will change the background color of every slot in agendaWeek and agendaDay from 00:00 to 08:00, 16:00 to 24:00 (from Mondays to Fridays - dow:[1,2,3,4,5]), and from 00:00 to 08:00, 12:00 to 24:00 (On Saturdays - dow:[6]).

Answer 2

You can add each business hour as an event. FullCalendar works with the same structure to populate businessHours option:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
Note: The important options in this events are className:'fc-nonbusiness and rendering:'inverse-background'.
Good Luck.