Mutliple business hours in full calendar with two shifts each day

Question

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 1

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.

Answer 2

We can add each of our business hours as events with the following options - this is the standard options that fullcalendar works with to populate the 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 magic is done by className : fc-nonbusiness which is counter-intutive; however, that is reversed by the option rendering:'inverse-background and all works well.

Good Luck.