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

Question

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'}
]

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

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

Answer 1

其实并没有什么不同的颜色，只是背景事件元素有透明度而已。在物理世界中，当你将两个透明的东西叠加在一起时，当你透过它们看时，颜色会变深，因为光线必须通过两层过滤，而不是一层。该行为以 CSS 实现透明度的方式实现。

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

.fc-bg-event
{
  opacity: 1 !important;
}

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

不过我认为这有一些缺点：

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

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

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

fullcalendar make color for overlapping background events identical to non overlapping background events

javascript

html

fullcalendar

fullcalendar-5