Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add multiple business hours in fullCalendar?

Tags:

fullcalendar

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.

like image 285
Norbert Kiss Avatar asked Dec 15 '22 13:12

Norbert Kiss


1 Answers

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]).

like image 120
Norbert Kiss Avatar answered Apr 17 '23 18:04

Norbert Kiss