CODEWITHSUNDEEP
javascripthtmlfullcalendarfullcalendar-5
Daniel Polak
Daniel Polak

Reputation: 23

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

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?

Upvotes: 0

Views: 538

Answers (1)

ADyson
ADyson

Reputation: 61904

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.

Upvotes: 1

Related Questions