fullcalendar: textColor is not applied to background events

I’m using a workaround for that using eventDidMount:

eventDidMount: function(info) {
	if (info.event.textColor) {
		info.el.style.color=info.event.textColor;
	}
}

Here is a workAround that works… 😉. overwrite fc-bg-event opacity and past your transparency with the color. So textColor will keep is opacity to 1 on background Events.

code: .fc .fc-bg-event { opacity: 1; } … color: rgba(${r}, ${g}, ${b}, ${opacity}).

or if you don’t have acces to the color. You can change it with that function. color: hexToRGBA(item.color, 0.3)

function hexToRGBA(hex, opacity) { // Retire le # si il est présent hex = hex.replace(/^#/, ‘’);

// Convertit le hex en valeurs RGB
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

// Retourne la couleur en format RGBA avec l'opacité donnée
return `rgba(${r}, ${g}, ${b}, ${opacity})`;

}

@gasparfm i tried to implement what you did but I still don’t see text color changes.

Hey @arshaw as you can see from picture Its difficult to read the texts. Do we have any update on this issue?

NOTE: I have used background events and made background color white. I just need to make text darker so that its more visible

I’ve just run into this, and can conclusively show that the problem is:

.fc-event.main {
  color: var(--fc-event-text-color, #fff);
}

is applied BELOW the <a> wrapper around the event. When you add a color or className to an event OR to an eventSource, this is added to the <a> wrapper:

<a class="fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past ticket ticket" style="border-color: firebrick; background-color: firebrick;">
<div class="fc-event-main">The Brothers Of The Situation - 4 tickets</div>
<div class="fc-event-resizer fc-event-resizer-end"></div>
</a>

As you can see, I have class “ticket” applied to both the eventSource and the event; I also have the element styles applied (from the eventSource) - but NEVER-THE-LESS .fc-event-main TROMPS on the color value.

I have a work-around because I’m implementing the eventContent hook (ugly though it may be) - but this is just plain WRONG if your intent is to allow developer control of the colors.

EITHER the event & eventSource classes and styles should be applied to the inner div (.fc-event.main), OR that color: should be REMOVED.

@LiamBull Actually you can control the color via css classes. Declare css class and rules you want to affect event title and then provide it as classNames value as described in the docs

The issue is that textColor does not work for background events so I’ll reopen this.

https://codepen.io/acerix/pen/dyGVeee