Hello,
I was implementing a full calendar for my outsystem project and I was trying to change the text color for each event in the calendar but the color that I'm inserting into the calendar is not being applied, does anyone know a way to fix this?
The only colors that are being applied are black and white.
This is the link for the full calendar that I'm using:
https://fullcalendar.io/
And this is the code for each event that I'm inserting into the calendar:
The "textColor" is what defines the color of the text for each event, I have tried RGB, HEXA and plain text ('orange') but the color didn't change.
Hi,
Please check by changing property name "textColor" with "eventTextColor" and assign the desire color.
hope this will help you.
Sorry, I should have mentioned that I also had tried the property name "eventTextColor" and it didn't work either.
Hi Helder,
I'm not very familiar with that calendar component, but I tried tweaking one of the examples available in their website and managed to successfully set the text color using the "textColor" attribute:
Did you inspect the generated HTML code to check if there isn't any CSS overriding the text color?
Hi Aurelio, I'm honestly not sure where to inspect in the HTML code to check if there is a CSS overriding the text color.
And while I while testing the textColor I noticed that it only changes to black or white if I place it like this: textColor: 'black' textColor: 'white', if I try in hexadecimal or RGB values it doesn't change the color (I'm using hexadecimal for the color output)
Right click the event name in your app and select the "Inspect" option. You'll be taken to the developer tools where you can inspect the HTML.
In the example below, I can see that the text color is being set via the "style" property of the element with the "fc-event-main" class:
This is what I'm getting in the console, I tried to set the color of the text as 'red' but it got overrided.
Well there's your answer. That ".black" class is overriding the color you're setting for the events. You can try to change that CSS to be less specific or remove that class entirely from your element and always set the color via the "textColor" attribute.
Could you tell me how to do that? I'm not not very knowledgeable in CSS.
It's really hard for me to suggest how to do that without looking at your code. That class is probably being used elsewhere, so you have to be careful when changing it to avoid breaking other screens.
Hi @Helder Silva
Can you please share the OML