Variable business hours in Fullcalendar

Question

I'm working with FullCalendar and I'm using it for a business which has varying hours

• Mon, Tue, Wed, Fri is 09:00 - 17:00.

• Thu is 09:00 - 19:00.

  businessHours: {
      start: '09:00', // a start time (10am in this example)
      end: '17:00', // an end time (6pm in this example)
      dow: [ 1, 2, 3, 5]
          // days of week. an array of zero-based day of week integers (0=Sunday)
          // (Monday-Thursday in this example)
  }
  

http://fullcalendar.io/docs/display/businessHours/

How can this be achieved?

Answer 1

Try this - Adding an event for each business hour, like so:

{
  ...
  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 : className and rendering are important options for this to work.

Good Luck.

Answer 2

To use variable hours for business hours, you need to use background events like this:

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

Notice in the last event it has the constraint filled in? This says that this can only be placed within an available hours slot. Using constraints, you can make flexible business hours.

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