首页 > 解决方案 > 如何创建像视图一样的资源时间线,但对于 dayGridView?

问题描述

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

例子:

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

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

先感谢您。

在此处输入图像描述

标签: javascriptfullcalendarfullcalendar-schedulerfullcalendar-4

解决方案


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

并且要使事件延伸整个宽度,您应该定义slotDuration天而不是小时。

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

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

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


推荐阅读