Colored text/bg

[MatsiWolf]

I've used the eventTransformer to assign ev.color to an event, but it only makes the symbol colored.
Is there a way to make this change the text or BG color for an event?

[eouia]

Add these into your custom.css

• For single-day event;

.CX3 .event.singleday {
  color: var(--calendarColor); /* Or whatever color value you want */
  background-color: blue; /* Or whatever */
} 

• For fullday event;

.CX3 .event.fullday {
  color: white; /* Or whatever color value you want */
  background-color: red; /* Or whatever */
} 

You can use also these as value of colors

• var(--defaultcolor) : usually white unless you redefine it.
• var(--calendarColor) : your calendar configuration value
• var(--oppositeColor) : black or white, depending on your calendarColor.

[MatsiWolf]

That seems like it would just change the color of everything.
I currently use the eventTransformer to make different kinds of events have different colors, the issue is that the color only applies to the symbol, and nothing else. I want to have different events have different color text, not just the symbol

[eouia]

You can add additional ‘className’s on your specific event in eventTransformer, then apply css for that event like;
.CX3 .event.SOMETHING.singleday .title {
…
}
(sorry I’m on the phone, so can not show exact code, but you can catch the point)

[eouia]

There could be many various approaches; Here two of those methods.

eventTransformer: (event) => {
	if (event.title.search('CSS') > -1) event.class = 'myCustom'
	if (event.title.search('font') > -1) event.title = `<span style="color: red;">${event.title}</span>`
	return event
},

.CX3 .event.myCustom.singleday .title {
  color: cyan;
}

[MatsiWolf]

This works great, thank you!