Fullcalendar events have desaturated background color - css

Question

I'm using fullCalendar's resource-timeline views and I have noticed that the event background colors are de-saturated.
I have used different ways to set their color, including setting all event background colors with CSS, and everything works (i.e. I have no problem changing the event colors), except that the colors lack saturation.
For example, using CSS like this:
div#calendar {
background-color: red !important;
}
.fc-timeline-event {
background-color: red !important;
}
I would expect both the table background and the events to be saturated red. The background is, but the events are not. Checking with a color sampler shows that the background is #ff0000, but the cells are #ff5952, which corresponds to red saturated to 68%.
Strangely enough the browser inspector shows the computed background color as #ff0000.
Any ideas on how to achieve a display with fully saturated colors?

Answer 1

I have my solution.
In your CSS style code, you put the code below
.fc-bgevent {
opacity: 1;
}
The number 1 above can be changed to 0.9, 0.8 etc. It will replace the background event style.
And it works for me!

Answer 2

Fullcalendar CSS contains a rule that overlays the calendar with white, opacity 25%. This causes the problem
:
.fc-event .fc-bg {
z-index : 1;
background; #fff;
opacity: 0.25
)
The opacity needs to be set to 0. So Added this in my own stylesheet:
.fc-event .fc-bg {
opacity: 0 !important;
}