CSS styling vs list view

[hmijail]

I am displaying 2 calendars at once, and using css to style the first one:

.pgcal-event-0 {
background-color: red; 
color: white; 
}

It works great in the month view, but the list view has problems.

Each event has a bullet whose colour in FullCalendar is given by the source calendar's style, and so should help distinguish which events come from which calendar. But I guess that in PGC those styles aren't defined at the FC level, so all the bullets look the same.

Additionally, the background-color that worked well in the month view here turns into a jarring color band. Not pretty! ;)

I found a way to hide the bullet or even change its color, so that is workaround-able:

.pgcal-event-0 .fc-list-event-dot {
  border: calc(var(--fc-list-event-dot-width)/2) solid red;
  display: none;
}

But I can't find a CSS selector that would allow me to change the background colour in the list view independently of the month view. This could be me, though; I'm pretty new to this stuff.

• So, am I missing an existing selector or mechanism to change the background color of the list view entries?
• If not, would it be possible to have a new CSS selector added to them?
• Or, maybe have an option to specify the desired background colours in the short code block in WP, so that FC is aware of them and so the bullets are correct?

[hmijail]

In case it helps, the webpage is https://discoveringkizomba.com/kizomba-calendar-brisbane/

[lbell]

Howdy!

You should be able to target grid vs list for each calendar using selectors such as:

pgcal-event-0 fc-daygrid-event vs pgcal-event-0 fc-list-event

Good luck!