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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Fullcalendar的fc-highlight不适用于自定义日历中的日期更改相关的知识,希望对你有一定的参考价值。

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

将事件拖到日历上时,类.fc-highlight仅适用于Day1晚上8-11-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点。背景是灰色的。徘徊到第二天,背景消失了。

Here .fc-highlight covers the complete hour

Here .fc-highlight is not applied

我希望班级.fc-highlight保持活跃

答案

看起来问题是因为你正在使用“日”视图,但是通过将“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/

以上是关于Fullcalendar的fc-highlight不适用于自定义日历中的日期更改的主要内容,如果未能解决你的问题,请参考以下文章

fullCalendar使用经验总结

FullCalendar:如何重新创建/重新初始化 FullCalendar 或批量添加多个事件

FullCalendar日历插件

在FullCalendar中隐藏开始时间

css fullcalendar.css VS fullcalendar2.css

FullCalendar使用字符串