FullCalendar - 我可以实现这个视图（见图）答案

【问题标题】：FullCalendar - Can I achieve this view (see images)FullCalendar - 我可以实现这个视图（见图）
【发布时间】：2019-11-05 16:55:03
【问题描述】：

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

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

但是，我最终需要它像这样（并排）显示：

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

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

谢谢！

[编辑] 添加代码 sn-ps:

模板：

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

【问题讨论】：

您能否显示您用于获取当前显示的实际事件数据？请问日历配置代码？可能只是您需要设置一个较小的 slotDuration，以便在显示中获得足够的粒度，以便事件按顺序出现。现在您似乎只有一整天的粒度，因此不可避免地很难看到其中的特定时间
谢谢。我在帖子中添加了显着代码 sn-ps。

标签： javascript vue.js fullcalendar fullcalendar-scheduler fullcalendar-4

【解决方案1】：

正如我在上面的 cmets 中所暗示的那样，您看不到您希望的结果的原因是，当您将每个插槽压缩到一天时，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。

【讨论】：

完美！！非常感谢您的帮助！