FullCalendar

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 似乎切换到 "all-day"显示模式，它不再考虑一天中的特定时间，而是仅指示事件发生的日期。

以您想要的方式（或接近方式）显示的方法是将时段持续时间减少到半天（这显然会创建您可以做的最少一天的划分），并且还可以修改插槽标签略微适合。一旦槽持续时间涉及小时，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。

FullCalendar - 我可以实现这个视图吗（见图片）

FullCalendar - Can I achieve this view (see images)

javascript

vue.js

fullcalendar-scheduler

fullcalendar-4