How to put interval of time for lunch using FullCalendar

Question

Good afternoon everyone. I'm using FullCalendar and would like to know if you like me to put the lunch break in my schedule, so that time can be made not score schedule.

Example: Working hours from 08:00 to 18:00 and my lunch is from 12:00 until 13:00.

start:'08:00' end:'18:00'

businessHours: [ // specify an array instead
    {
        dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        start: '08:00' // 8am
        end: '18:00' // 6pm
    }
]

If you mean disable a time so that events cannot be placed, then look into [this FullCalendar Example](https://fullcalendar.io/js/fullcalendar-3.0.1/demos/background-events.html) on background events. Also check out the docs for [Background Events](https://fullcalendar.io/docs/event_rendering/Background_Events/). — Ryan89, Oct 18 '16 at 19:53

score 5 · Accepted Answer · edited Jul 24 '20 at 14:25

5

What about to split it in two like this?

businessHours: [ // specify an array instead
    {   // AM
        dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        start: '08:00', // 8am
        end: '12:00' // 12am
    },
    {   // PM
        dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        start: '13:00', // 1pm
        end: '18:00' // 6pm
    }
]

edited Jul 24 '20 at 14:25

Adil Malik

6,279
7
48
77

answered Oct 18 '16 at 19:57

Louys Patrice Bessette

33,375
6
36
64

That his suggestion worked, thank you. Now is the best solution would have any other suggestions? I saw the option of "rendering", but did not understand. Your suggestion worked. Just like to know if there is any other way to do it. – AmandaRJ Oct 18 '16 at 20:27
I've look at the [documentation](https://fullcalendar.io/docs/)... I see nothing that could do this. There is a couple "render" callbacks for some events... But nothing to split an event in parts like you wish. I think my answer is the only way to do it. – Louys Patrice Bessette Oct 18 '16 at 20:34
Also I found this, I agree with you. Thank you for your help, have a good week – AmandaRJ Oct 18 '16 at 20:48
@gingerRoot: I declined your edit on my answer. You can answer if you want... Even if the actual answer has been accepted. What you tried to do via an edit is a complete new answer... So post it. – Louys Patrice Bessette Nov 03 '16 at 00:19

score 0 · Answer 2 · answered Aug 04 '20 at 12:57

The answer before mine is still correct for older versions, but in higher versions(I'm using version 5) they made changes to the wording used.

businessHours: [ // specify an array instead
    {   // AM
        daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        startTime: '08:00', // 8am
        endTime: '12:00' // 12am
    },
    {   // PM
        daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        startTime: '13:00', // 1pm
        endTime: '18:00' // 6pm
    }
]

Dimitris Pertsinidis · Answer 3 · 2023-06-11T22:36:00.357

The answers before mine are correct, but I wanted to give you one more, that I think it is something you would like.

businessHours: [ // specify an array instead
{   // Here you will put your schedule
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', 
    endTime: '18:00' 
},
{   // Here you will put your lunch breaks
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '12:00',
    endTime: '13:00',
    display: 'background'
}]

So this way you can see your lunch breaks in your calendar.

How to put interval of time for lunch using FullCalendar

3 Answers3