Numerous working hours in a full calendar with two shifts every day

Question

I have included a complete calendar on my website. One of my requirements is getting business hours from the database and rendering them on the calendar. So basically every day has two shifts (morning and evening). I need to create an array of business hours with values ​​populated from the database. Out of the box, I can use the code below to display normal 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 the full calendar, are there others to achieve this? Thank you in advance.

Answer 1

I also needed the same function. I forked the repo into

https://github.com/dtmonterrey/fullcalendar

, . businessHours businessHours (, , ).

:

    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]
        }
    ]

. .

jsfiddle ,

http://jsfiddle.net/t7aczbdt/

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

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

Answer 2

business hours events options - , fullcalendar , businessHours: -

{
  ...
  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'
    }],
 ...
}

className : fc-nonbusiness, -; , rendering:'inverse-background, .

.