Full calendar business hours - fullcalendar

Question

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

Answer 1

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,
http://fullcalendar.io/docs/event_ui/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!

Answer 2

I have to show FullCaledar Time Slot for 8AM to 8PM fixed, so I have did some R&D, and apply following options, and it seems working fine!!! Cheers.
jq('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today,month,agendaWeek,resourceDay'
},
defaultView: 'resourceDay',
allDaySlot: false,
axisFormat: 'h:mm A',
timeFormat: 'h:mm T',
minTime: '08:00:00',
maxTime: '20:00:00',
Use,
minTime: '08:00:00',
maxTime: '20:00:00'
Thanks!!!

Answer 3

on the other hand, you can define working hours and days.
businessHours: [{
daysOfWeek: [1, 2, 3, 6, 7],
startTime: '08:00',
endTime: '23:00'
},
{
daysOfWeek: [4],
startTime: '08:00',
endTime: '16:00'
},
{
daysOfWeek: [5],
startTime: '15:00',
endTime: '23:00'
}
]
hope it helps.

Answer 4

In version 4 :
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
}
You may also break your business hour declaration into parts, in an array of objects, for additional control:
businessHours: [ // specify an array instead
{
daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
startTime: '08:00', // 8am
endTime: '18:00' // 6pm
},
{
daysOfWeek: [ 4, 5 ], // Thursday, Friday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
]
In version 3 :
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4 ], // Monday - Thursday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
}
You may also break your business hour declaration into parts for additional control (added in v2.9.1):
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
]