Search code examples
javascriptvue.jsfullcalendarfullcalendar-schedulerfullcalendar-4

FullCalendar - Can I achieve this view (see images)

I have downloaded and been experimenting with FullCalendar and it does almost everything I need for a resource scheduling app I am developing for my company's use. I just need to try and get it to display the events a bit differently and was hoping someone might be able to help.

I currently have it configured to display like this:

enter image description here

However, I am ultimately need it to display like this (side by side):

enter image description here

This is for a sequential process and it is important to convey the order of events and if one event (blue) extends into another day then the next day's event(s) (purple) have to wait until that one is done. This is not as clear in the top image as the bottom one.

Is this something that can be configured or will this require me to modify the source or intercept the event render and manipulate it there?

Thanks!

[EDIT] Added code snippets:

TEMPLATE:

<FullCalendar ref="fullCalendar"
          default-view="resourceTimelineMonth"
          :plugins="calendarPlugins"
          :events="calEvents"
          :resources="calResources"
          :weekends="true"
          :editable="true"
          :event-overlap="false"
          :slot-width="100"/>

SCRIPT:

data () {
  return {
    ...
    calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
    calEvents: [
        { resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
        { resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green'  },
        { resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue'  },
        { resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple'  }
    ],
    calResources: [
        {id: "101", title: "KM101"},
        {id: "102", title: "KM102"},
        {id: "103", title: "KM103"},
        {id: "104", title: "KM104"},
        {id: "105", title: "KM105"},
      ],
    ...
}
Solution

  • As I hinted at in the comments above, the reason you don't see what you're hoping for is because when you compress each slot to a single day, fullCalendar appears to switch to an "all-day" mode of display, where it ceases to take the specific times of day into account, and simply indicates the day(s) in which the event occurs.

    The way to get a display the way (or close to the way) you want is to reduce the slot duration to half a day (which clearly creates the least division of the day you can do), and also modify the slot labels slightly to suit. Once the slot duration involves hours, fullCalendar will start taking the time component of the event into account again when it renders.

    I don't know vue.js syntax and can't make a demo of it, so I've done the code and demo below in vanilla JS, but hopefully you can translate that into the syntax used by the vue plugin without any difficulty.

    Options to add to your calendar config:

    slotDuration: { hours: 12 },
slotLabelFormat: [
  { weekday: "short" },
  { hour: "2-digit", },
],

    Live demo: https://codepen.io/ADyson82/pen/VwwXowr

    See https://fullcalendar.io/docs/date-display for relevant documentation.