仅在全日历中允许后台事件发生 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% 依赖它们来验证您的数据。

Answer 2

扩展 ADyson 答案，在 FullCalendar 5 上，您需要通过“显示”更改“渲染”：

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

Answer 3

我遇到了同样的问题，我的解决方案是重写 timegrid 包中的 renderFillSegs 函数来重现前台事件的显示。

  renderFillSegs(segs: TimeColsSeg[], fillType: string) {
let { props, context } = this
let segVCoords = computeSegVCoords(segs, props.date, props.slatCoords, context.options.eventMinHeight) // don't assume all populated

let { eventMaxStack, eventOrderStrict } = this.context.options
let { segPlacements } = computeFgSegPlacements(segs, segVCoords, eventOrderStrict, eventMaxStack)

let children = segPlacements.map((segPlacement) => {
  let { seg, rect } = segPlacement
  let vStyle = computeSegVStyle(rect && rect.span)
  let hStyle = rect ? this.computeSegHStyle(rect) : { left: 0, right: 0 }

  return (
    <div
      key={buildEventRangeKey(seg.eventRange)}
      className="fc-timegrid-bg-harness"
      style={{...vStyle, ...hStyle}}
    >
      {fillType === 'bg-event' ?
        <BgEvent seg={seg} {...getSegMeta(seg, props.todayRange, props.nowDate)} /> :
        renderFill(fillType)}
    </div>
  )
})

return <Fragment>{children}</Fragment>

}