javascript - FullCalendar - 我可以实现这个 View 吗(见图片)

Question

我已经下载并试用了 FullCalendar，它几乎 满足了我正在开发供公司使用的资源调度应用程序所需的一切。我只需要尝试让它以不同的方式显示事件，并希望有人能够提供帮助。

我目前将其配置为显示如下:

但是，我最终需要它像这样显示(并排):

这是一个连续的过程，传达事件的顺序很重要，如果一个事件(蓝色)延伸到另一天，那么第二天的事件(紫色)必须等到该事件完成。这在顶部图像中不如底部图像清晰。

这是可以配置的东西还是需要我修改源代码或拦截事件渲染并在那里进行操作？

谢谢!

[编辑] 添加了代码片段:

模板:

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

脚本:

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"},
      ],
    ...
}

Answer 1

正如我在上面的评论中暗示的那样，您看不到您所希望的是因为当您将每个时段压缩到一天时，fullCalendar 似乎切换到“全天”模式显示，它不再考虑一天中的特定时间，而是简单地指示事件发生的日期。

以您想要的方式(或接近方式)显示的方法是将时段持续时间减少到半天(这显然会创建您可以做的一天中的最少划分)，并修改时段标签稍微适合。一旦槽持续时间涉及小时，fullCalendar 将在呈现时再次开始考虑事件的时间部分。

我不知道 vue.js 语法，也无法制作它的演示，所以我在 vanilla JS 中完成了下面的代码和演示，但希望您可以将其转换为 vue 插件使用的语法没有任何困难。

添加到日历配置的选项:

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

现场演示:https://codepen.io/ADyson82/pen/VwwXowr

参见 https://fullcalendar.io/docs/date-display获取相关文档。