如何为dayGridView创建类似于视图的资源时间轴?

时间:2020-03-03 13:11:05

标签: javascript fullcalendar fullcalendar-scheduler fullcalendar-4

我正在尝试构建类似于下图的视图。我尝试过resourceDayGrid视图,但是这一视图将资源放置为列而不是行。我还尝试了resourceTimelineDay,resourceTimelineWeek和resourceTimelineMonth并设置slotDuration:“ 24:00:00”,但这对我来说不行,因为不是24小时的插槽不会占用单元格的全宽。 / p>

示例:

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

您有什么建议吗?如果您能指出正确的方向,我将不胜感激。

谢谢。

enter image description here

1 个答案:

答案 0 :(得分:3)

声明“ resourceTimelineMonth”然后将其持续时间设置为7天没有任何意义。 “ resourceTimelineDay”也是如此。其持续时间已经由其名称定义。同样,您无需费心将resuorceTimelineWeek的持续时间设置为7天-已经是!

要使事件扩展到整个范围,您应该在几天而不是几小时内定义slotDuration

因此,您可以将视图定义简化为:

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

演示:https://codepen.io/ADyson82/pen/LYVjLMB