仅在 fullcalendar 中允许后台事件的 eventOverlap

Question

有没有办法避免事件重叠； 就像完整日历配置中的 eventOverlap: false 一样， 但另一方面允许背景事件重叠？

我想将一些事件作为背景事件呈现到我的日历中，就像信息一样（其他日历中已经有一些事件），但允许我在顶部创建、移动或调整我的新事件。

但所有其他事件都不允许在此日历内重叠。

我只是试试这个，没有成功：

   calendar:{
      editable: true,
      contentHeight: 'auto',
      theme: true,
      firstDay: 1,
      eventOverlap: false,
      nowIndicator: true,
      allDaySlot: false,
      slotDuration: '01:00:00',
      snapDuration: '00:00:01',
      axisFormat: 'HH:mm',
      timeFormat: 'HH:mm',
      timezone: 'local',
      views: {
        listThreeDay: {
          type: 'list',
          duration: { days: 3 },
          buttonText: 'list 3 day'
        },
        listOneWeek: {
          type: 'list',
          duration: { weeks: 1 },
          buttonText: 'list week'
        }
      },
      businessHours: {
        start: '06:00',         // a start time (6am in this example)
        end: '18:00',           // an end time (6pm in this example)
        dow: [ 1, 2, 3, 4, 5 ]  // days of week (here monday till friday)
      },
      events: [
        {
          start: '00:00:00+02:00',
          end: '08:00:00+02:00',
          color: 'red',
          rendering: 'background',
          dow: [1],
          overlap: true,
        }
      ],
     ...

下图是我需要的：

• 背景事件（红色）
• 正常事件（蓝色）重叠背景事件
• 正常事件（蓝色）不与其他正常事件重叠

Answer 1

您可以在eventOverlap 回调上使用一个非常简单的自定义函数来实现此目的。只需测试被重叠的事件是否是背景事件：

eventOverlap: function(stillEvent, movingEvent) {
    return stillEvent.rendering == "background";
}

您也无需在任何单独的背景事件中指定overlap: true。

可以在这里看到一个工作示例：http://jsfiddle.net/sbxpv25p/18/

https://fullcalendar.io/docs/event_ui/eventOverlap/ 解释了如何使用自定义函数进行此回调。

注意您可能已经意识到这一点，但值得指出的是：如果您打算将新拖动/调整大小的事件保存回数据库，您还需要仔细检查服务器上的重叠规则，因为任何规则都写入任何了解浏览器开发工具的人都可以轻松禁用或绕过 JavaScript。这类前端规则仅对用户友好有用 - 不能 100% 依赖它们来验证您的数据。