FullCalendar -我能实现这个视图(见图片)
FullCalendar -我能实现这个视图(见图片)
提问于 2019-11-05 16:55:03
我已经下载并试验了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"},
],
...
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-06 16:12:03
正如我在上面的评论中所暗示的，您没有看到您希望看到的是因为当您将每个时隙压缩为单一的一天时，fullCalendar似乎切换到了一种“全天”的显示模式，在这种模式下，它不再考虑一天中特定的时间，而只是指出事件发生的日期。
获得显示的方式(或接近所需的方式)的方法是将时隙时间缩短到半天(这显然创建了一天中最少的时间间隔)，还可以稍微修改插槽标签以适应需要。一旦时隙持续时间涉及小时，fullCalendar将在呈现事件时再次考虑事件的时间组件。
我不懂vue.js语法，也不能演示它，所以我已经用普通的JS完成了下面的代码和演示，但是希望您能够毫不费力地将它转换成vue插件所使用的语法。
添加到日历配置中的选项：
slotDuration: { hours: 12 },
slotLabelFormat: [
{ weekday: "short" },
{ hour: "2-digit", },
],页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58716021
复制相关文章
相似问题
腾讯云开发者
