FullCalendar-我能否获得此视图(参见图片)

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

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

FullCalendar-我能否获得此视图(参见图片)

但是,我最终需要它以这种方式(并排显示):

FullCalendar-我能否获得此视图(参见图片)

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

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

谢谢!

[EDIT]添加了代码段:

模板:

<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'  },title: 'WO144',start: '2019-11-01T18:00:00',end: '2019-11-02T03:00:00',backgroundColor: 'blue'  },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"},],...
}
yaojinzhang 回答:FullCalendar-我能否获得此视图(参见图片)

正如我在上面的评论中所暗示的那样,您看不到期望的原因是因为将每个广告位压缩到一天后,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

本文链接:https://www.f2er.com/3157795.html

大家都在问