How to add multiple business hours to fullCalendar?
Is there a way to set multiple business hours or gray specific time ranges in FullCalendar view? I 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 does not work. The full calendar recognizes this array as a true value and sets the default for businesHours.
It works:
businessHours:
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
}
But I want to be able to customize the daily opening hours. Is there a way to solve this? If I could somehow add a css class to specific time ranges that would do it, but I don't know how to capture those time ranges. Render not working due to agenda presentation.
source to share
I figured out the solution. This is not the best way to solve this problem, but it is easy to understand and implement until we get a more customizable businessHours () function in an upcoming update.
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 cause background events in the calendar to appear that will not be clickable and will appear businessHours()
grayed out and change the background color of each slot in AgendaWeek and AgendaDay from 00:00 to 08:00, from 16:00 to 24:00 ( from Monday to Friday - dow:[1,2,3,4,5]
) and from 00:00 to 08:00, from 12:00 to 24:00 (on Saturdays - dow:[6]
).
source to share
You can add every business hour as an event. FullCalendar
works with the same structure to populate the option businessHours
:
{
...
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 . Important options
in this events
are className:'fc-nonbusiness
and rendering:'inverse-background'
.
Good luck.
source to share