fullcalendar make color for overlapping background events identical to non overlapping background ev-CodePudding

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

I am using Fullcalendar in view timeGridWeek and events that overlap show with a different color from events that don't overlap.

How can I have Fullcalendar use the same color for overlapping events as for non-overlapping events?

CodePudding user response：

It's not really a different colour, it's just that the background event elements have transparency. In the physical world, when you overlay two transparent things on top of each other, the result when you look through them is a darker colour because the light has to pass through two layers of filtering instead of one. That behaviour is implemented in the way CSS does transparency as well.

The only way I know of to ensure complete consistency is to remove the transparancy and use a solid colour for background events instead:

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

Demo: https://codepen.io/ADyson82/pen/xxXdpYX

However I think this has some disadvantages:

you can't see the gridlines behind the event showing the time slots
you can't really see where each event begins and ends, so it's hard to know there are actually separate events on the calendar which are either overlapping or consecutive.

You'll need to decide whether your wish for a consistent background colour is more important than those downsides.