How to create a resource timeline like view, but for dayGridView?

Question

I'm trying to build a view similar to the picture below. I have tried resourceDayGrid view, but this one places the resources as columns instead of rows. I have also tried the resourceTimelineDay, resourceTimelineWeek and resourceTimelineMonth and setting slotDuration: "24:00:00", but this doesn't do it for me since the slots that aren't 24 hours don't take fullwidth of the cell.

Example:

views:{
  resourceTimelineMonth:{
    duration: { days:7 },
    slotDuration:'24:00:00'
  },
  resourceTimelineWeek:{
    duration: { days:7 },
    slotDuration:'24:00:00'
  },
  resourceTimelineDay:{
    duration: { days:7 },
    slotDuration:'24:00:00'
  }
},

https://codepen.io/tuancaraballo/pen/poJrwLy?editable=true&editors=001

Do you have any suggestions? I would appreciate if you can point me in the right direction.

Thank you in advance.

Answer 1

It makes no sense to declare "resourceTimelineMonth" and then set its duration to 7 days. The same for "resourceTimelineDay". Its duration is defined already by its name. Equally you don't need to bother setting the duration of a resuorceTimelineWeek to 7 days - it already is!

And to make events stretch the whole width, you should define the slotDuration in days instead of hours.

So you can simplify your view definitions to this:

views:{
    resourceTimelineWeek: {
      slotDuration: { days: 1 }
    }
},

Demo: https://codepen.io/ADyson82/pen/LYVjLMB