It’s probably down to odd CSS black magic, but I’m noticing that using the CSS injection to get calendar event coloring to work is only working for the background color - the foreground color is being ignored/overridden by the default for the theme. Using the browser’s inspector shows the color: element of the custom CSS crossed out.
Is there a way to get it working?
Hi, Jon!
Could you please provide more details regarding your problem? CSS code that you use will be helpful.
Regards,
Gleb
Our app allows users to set what color they’d like to have for any visit type - so I’ve just got a bunch of test visit types put in - here’s the CSS injected for one of them:
.v-calendar-event-vtcolor-Orange { color: #2aff33; background-color: #fa6d00; }
And a screenshot showing it’s injected, and half-working (background working, foreground ignored):
It appears that the default styles have more specific css selector .v-calendar-week-wrapper .v-calendar-event, so that they have priority over your styles.
In simple case, you can add .v-calendar-week-wrapper to your css selector, e.g.: .v-calendar-week-wrapper .v-calendar-event-vtcolor-Orange {...}.
Altenatively, you can write something as follows (where event-red is my customs style name):
.v-calendar-week-wrapper .v-calendar-event-event-red,
.v-calendar-event-event-red:before {
color: #e00000;
}
.v-calendar-week-wrapper .v-calendar-event-event-red .v-calendar-event-content {
background-color: #f4c8c8;
}
Live demo with events styling: https://demo10.cuba-platform.com/sampler/open?screen=week-calendar
Regards,
Gleb
That sadly doesn’t work. 
The other method would require a lot of rewriting of how I generate and inject the CSS.
CSS is … a pain. 
I’m trying to find a way to get this to work in the simplest way possible.
(Oddly, it works fine when in month view - but not day or week.)
This also did not work until I preprended .hover to everything. Then it works. So what works is the above quoted 2 blocks, but with .hover preprended to the selectors.
Actually, you don’t need to prepend your styles with the theme name. It seems that you added your styles to the wrong file, styles.scss I presume.
hover-ext.scss is the proper place for custom styles.
The styles are not in a CSS file at all - they are injected at runtime. We cannot put them in a CSS file as users configure by visit type what color they would like visits with a particular visit type to show in. So the styles have to be runtime injected.
I’m using Page.getCurrent().getStyles().add(...) as numerous examples show.
I would recommend implementing predefined color styles and let users choose from that set, similar to this live demo.
Such approach is easier for you as a developer and for the users since they don’t need to pick a random color.
Regards,
Gleb
Well, I have it working already - just needed the prepend of .hover to make it work. The other way may be limiting as some of our clients have dozens (and a couple have hundreds) of visit types and make use of some pretty unique colors. The problem is this is a conversion and some of our clients date to 1994… and they’re used to certain things.
