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

Question

我有一个从第 1 天晚上 8 点到第 2 天晚上 8 点运行的全日历调度程序 View

将事件拖到日历上时，类 .fc-highlight 仅适用于第 1 天晚上 8 点至晚上 11 点 59 分。将事件悬停在第 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>

这就是我将时间从晚上 8 点设置到晚上 8 点的方式

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 点。背景是灰色的。悬停到第二天，背景消失。

我希望类 .fc-highlight 保持活跃

Answer 1

看起来问题是因为您使用的是“日” View ，然后通过将“maxTime”设置为高于午夜来破坏它。可能在 fullCalendar 代码的某个地方，它遇到了午夜的硬性限制，在该限制下它不会将该类添加到该字段之外的字段中。我没有研究代码，但根据观察到的行为，我只能假设这些。

在您的 View 中定义这样的自定义时间段的正确方法是使用 visibleRange ，并可选择将其与 custom view 结合使用(特别是如果您还想在日历中使用其他 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')
  }
}

这是一个完整的工作演示，使用该范围定义作为自定义时间轴 View 的一部分，基于您发布的早期 fiddle :https://jsfiddle.net/Lzuv5kog/1/