Full calendar business hours

Question

I am trying to use Business hour option , but i cant 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.