Fullcalendar custom colors
Hi,
Is there a way to customize events on calendar with Metronic Colors?
I notice events use --primary color, but I would like to keep event in different categories. It would be nice to use CSS classes for this, instead of putting hexadecimals in the JS.
Do we have any option for this?
Replies (5)
Hi,
Sure, you can customize it by passing color classes via className attribute:
{
id: uid(),
title: "All Day Event",
start: YM + "-01",
end: YM + "-02",
description: "Toto lorem ipsum dolor sit incid idunt ut",
className: "border-success bg-success text-inverse-success",
location: "Federation Square"
},You can use other color classes by referring to the Metronic color Utility Classes.
Regards.
Thank you Sean,
You rock as always....
I was bangging my head against the wall to come up with a solution for a color text and it's proper background.....
I completly forgot about : "text-inverse-*"
Thank you sooo much.
excelent tip, thanks.
But text-inverse-* is not working.
It seems another CSS rule is more specific, the text is aways white.
I also cannot add fw-semibold fw-6 or another font related rule to className
Any text class applied in className will be added to the anchor tag
However, there is an internal (and more specific) css that override this to white (#fff).
so, it not possible to configure the text color using this classes.
.fc-h-event .fc-event-main {
color: #fff;
color: var(--fc-event-text-color,#fff);
}Hi 
,
Good workaround. We will consider adding those utility classes in a future update.
Regards.
