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/解释了如何使用自定义函数进行此回调。

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

仅在fullcalendar中允许eventOverlap用于后台事件

1 个答案: