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?
It's not really a different color, it's just that the background event elements have transparency. In the physical world, when you superimpose two transparent things on top of each other, the result when you look through them is a darker color because the light has to go through two layers of filtering instead of one. That behavior is also implemented in the way CSS does transparency.
The only way I know of to guarantee complete consistency is to remove the transparency and use a solid color for the background events instead:
.fc-bg-event { opacity: 0.5 !important; }Demo: https://codepen.io/ADyson82/pen/xxXdpYX
However, I think this has some disadvantages:
you can't see the grid lines behind the event showing the time intervals
you can't really see where each event starts and ends, so it's hard to tell if there are separate events on the calendar that overlap or are back-to-back.
You'll need to decide if your desire for a consistent background color outweighs these drawbacks.