fullcalendar 使重叠背景事件的颜色与非重叠背景事件相同

Posted 2023-02-19

【中文标题】fullcalendar 使重叠背景事件的颜色与非重叠背景事件相同

【英文标题】：fullcalendar make color for overlapping background events identical to non overlapping background events

【发布时间】：2022-01-20 10:35:50

【问题描述】：

events:[
  overlap:false, display:'background', start:'2021-12-23 10:15:00', end:'2021-12-23 10:30:00',
  overlap:false, display:'background', start:'2021-12-23 10:30:00', end:'2021-12-23 10:45:00',
  overlap:false, display:'background', start:'2021-12-23 10:30:00', 
end:'2021-12-23 11:15:00',
  overlap:false, display:'background', start:'2021-12-23 12:00:00', end:'2021-12-23 12:45:00',
  overlap:false, display:'background', start:'2021-12-23 12:30:00', end:'2021-12-23 13:00:00'
]

我在视图 timeGridWeek 中使用 Fullcalendar，重叠的事件以与不重叠的事件不同的颜色显示。

如何让 Fullcalendar 对重叠事件使用与非重叠事件相同的颜色？

【参考方案1】：

这并不是真正的不同颜色，只是背景事件元素具有透明度。在物理世界中，当你将两个透明的东西叠加在一起时，你看透它们的结果是颜色更深，因为光必须通过两层过滤而不是一层。这种行为也以 CSS 透明的方式实现。

我所知道的确保完全一致的唯一方法是移除透明度并为背景事件使用纯色：

.fc-bg-event

  opacity: 1 !important;

演示：https://codepen.io/ADyson82/pen/xxXdpYX

但我认为这有一些缺点：

您看不到显示时隙的事件背后的网格线 您无法真正看到每个事件的开始和结束位置，因此很难知道日历上实际上是否存在重叠或连续的单独事件。

您需要确定是否希望使用一致的背景颜色比这些缺点更重要。