我已经下载并正在试用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"},],...
}