user1744973 user1744973 - 6 months ago 119
Javascript Question

Mutliple business hours in full calendar with two shifts each day

I have integrated full calendar into my website. One of my requirement is to have business hours fetch from database and render it on the calendar. So basically each day has two shifts(Morning and evening). I need to be able to create an array of business hours with the values getting populated from database. Out of the box, I'm able to use the below code to render a common business hours.

businessHours:
{
start: '10:00:00',
end: '16:00:00',
dow: [0,1,2,3,4,5,6]
},


I want to achieve something like this:

businessHours:[
{
start: '10:00:00',
end: '13:00:00',
dow: [0]
},
{
start: '14:00:00',
end: '19:00:00',
dow: [0]
},
{
start: '09:00:00',
end: '12:00:00',
dow: [1]
},
{
start: '12:30:00',
end: '18:00:00',
dow: [1]
},
]


If this is not possible with the existing properties of full calendar, is there any other to achieve this ? Thank you in advance.

Answer

I also needed the same feature. I forked the repo to

https://github.com/dtmonterrey/fullcalendar

and implemented a solution that works for me. It works with a single businessHours definition or with an array of businessHours definitions (like the example you tried).

Example:

    businessHours:[ 
        {
            start: '09:00',
            end: '13:00',
            dow: [1, 2]
        },
        {
            start: '14:00',
            end: '16:00',
            dow: [1, 2]
        },
        {
            start: '10:00',
            end: '19:00',
            dow: [4]
        },
        {
            start: '06:00',
            end: '10:30',
            dow: [6]
        },
        {
            start: '13:00',
            end: '17:00',
            dow: [6]
        },
        {
            start: '20:00',
            end: '23:00',
            dow: [6]
        }
    ]

I have created a pull request. Suggestions are welcome.

example and demo

I couldn't get jsfiddle to work, so the demo for

http://jsfiddle.net/t7aczbdt/

is here

http://eo14.com/static/fullcalendar/

You could try it on your computer: uncompress this http://eo14.com/static/fullcalendar.zip and open with your browser.

Comments