仅在全日历中允许后台事件发生 eventOverlap

Question

有没有办法避免事件重叠；就像 fullcalendar 配置中的 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% 依赖它们来验证您的数据。