Display event on eventcalendar with lunch break

Event calendars & schedulers
1

I’m using V5 eventcalendar for staff work schedules, and it’s working great, except I would like my events to include lunch breaks. So right now I have this:

edna
edna1377×874 21.6 KB

But I would like it to display like this:

edna.invalid
edna.invalid1377×874 23.5 KB

Or something similar. Basically highlight or grey out the lunch break portion of her work day. Is it possible to do this with a single event? Or would my users need to create multiple events?

2

Hi @Vincent_Wansink :wave:

There are a couple of ways you can handle this:

  1. Allow events on invalids - you can enable event creation on invalid time ranges, similar to this example. To do this, just set the invalidateEvent option to start-end. By default, the invalid area will be slightly visible, but you can adjust the opacity via CSS, or make the invalid section more noticeable with custom styling, also shown in this example.
  2. Split into two separate events - alternatively, you can display the event as two separate entries. The good news is that users don’t need to create them manually. When a new event is added, the onEventCreate lifecycle event is triggered. From there, you can check if it overlaps with an invalid range and, if it does, programmatically split it into two parts.