Search code examples
fullcalendarfullcalendar-schedulerfullcalendar-6

Fullcalendar - custom timeline and event slots for resource view "Rooms/Shifts"

Is it possible and how to achive such scheduler view:

enter image description here

There are always 2 shifts per day. Day/Shift is single slot for multiple events. We are using pro version with Timeline View

Solution

  • This is achievable.

    Option "slotLabelFormat" controls how the time and date cells are labelled, here's an example:

    slotLabelFormat: [
  { day: 'numeric', month: 'numeric', year: 'numeric' }, // top level of text
  { hour: 'numeric' } // lower level of text
],

    Demo.

    This allows to create 2 row header.

    The "slotDuration" setting controls the size of the slots. This allow to split columns into 2 (or more) periods per day. If you need the shifts to be less than 12 hours you can change that and set slotMinTime/slotMaxTime to hide the other hours.

    slotDuration: {
  hours: 12
},

    And there is also "slotLabelContent" to customize the labels. It can be used same way as "content-injection". This can be function triggered each time label is displayed. This way hour label may be changed for shifts names or whatever is needed.

    /** @param {SlotLabelContentArg} arg */
slotLabelContent: arg => {
   arg.level; // Label level
   arg.text; // Original label text - depends on slotLabelFormat & slotDuration
   arg.date; // slot Date object

   return arg.text;
}