Fullcalendar的fc-highlight不适用于自定义日历中的日期更改

时间:2019-04-26 09:35:45

标签: css fullcalendar highlight

我有一个Fullcalendar调度程序视图,该视图从第一天的晚上8点到第二天的晚上8点

将事件拖到日历上时,仅从Day1 8 PM-11.59PM开始应用.fc-highlight类。将事件悬停在第2天时,不会应用.fc-highlight类

这些是我的活动

<div id='external-events'>
        <div class='fc-event'>
            My Awesome Event
        </div>
        <div class='fc-event'>
            Foo
        </div>
        <div class='fc-event'>
            Bar
        </div>
</div>

这就是我将时间从8PM设置为8PM

minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "1.20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)

我已经建立了一个演示here

尝试拾取一个事件并将其拖到晚上11点。背景为灰色。徘徊到第二天,背景消失了。

Here .fc-highlight covers the complete hour

Here .fc-highlight is not applied

我希望.fc-highlight类保持活动状态

1 个答案:

答案 0 :(得分:0)

问题似乎是因为您使用的是“日”视图,但随后通过将“ maxTime”设置为高于午夜来对其进行处理。大概在fullCalendar代码中的某个地方,它会遇到午夜的硬限制,在午夜时,它不会将该类添加到该字段之外。我还没有研究过代码,但是根据观察到的行为,我可以假设所有这些。

在视图中定义这样的自定义时间段的正确方法是使用visibleRange,并且可以选择将其与custom view结合使用(特别是如果要在日历中使用其他视图作为好)。

这是“可见范围”定义的示例,它将满足您的需求。时间轴将始终从当前所选日期的晚上8点显示到第二天的晚上8点。您不应与此同时指定任何其他选项,例如dayCount或minTime / maxTime,因为它们会扭曲最终显示:

visibleRange: function(currentDate) {
  return {
   start: currentDate.clone().startOf("day").add('20', 'h'),
   end: currentDate.clone().startOf("day").add('1', 'd').add('20', 'h')
  }
}

这是一个完整的工作演示,使用该范围定义作为自定义时间轴视图的一部分,基于您之前发布的小提琴:https://jsfiddle.net/Lzuv5kog/1/