Full calendar business hours

I am trying to use business hour option, but I can't able to reflect the changes.

I want to display multiple business hours. Here is the code:

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    businessHours:
        [
            {
                start: '10:00', // a start time (10am in this example)
                end: '12:00', // an end time (12pm in this example)
                dow: [1, 2, 3, 4]
                // days of week. an array of zero-based day of week integers (0=Sunday)
                // (Monday-Thursday in this example)
            },
            {
                start: '12:00', // a start time (12pm in this example)
                end: '18:00', // an end time (6pm in this example)
                dow: [1, 2, 3, 4]
                // days of week. an array of zero-based day of week integers (0=Sunday)
                // (Monday-Thursday in this example)
            }]
});  

like so

businessHours:
    {
                            
            start: '11:00',
            end:   '12:00',
            dow: [ 1, 2, 3, 4, 5]
    },

in order to use different hours for different shifts -> use background events

events:
[
    {
        id:    'available_hours',
        start: '2015-1-13T8:00:00',
        end:   '2015-1-13T19:00:00',
        rendering: 'background'
    },
    {
        id:    'work',
        start: '2015-1-13T10:00:00',
        end:   '2015-1-13T16:00:00',
        constraint: 'available_hours'
    }
]

For more information, see this link, https://fullcalendar.io/docs/eventConstraint/

There's several different ways you can approach this, depending on how you use the calendar. Hopefully the flexibility of the constraints will help you get what you need done.

Pretty glad this feature finally showed up!