stefanuebe/vaadin-fullcalendar

CSS variable --fc-list-event-hover-bg-color cannot be set

sirbris opened this issue · 3 comments

sirbris commented

The variable --fc-list-event-hover-bg-color can't be overridden or am I missing something?
I'm using V23.1.3 and know there seems to be some issues with the "themeFor" for addons.
I've also tried something like this but it also gets back to default #f5f5f5 so in dark mode not so nice ;) How could this variable be set?

.fc-list-event:hover td {
  background-color: var(--lumo-contrast-5pct) !important;
}
sirbris commented

ok, no luck with css file but via code it worked:
calendar.addCustomStyles(".fc-list-event:hover td { background-color: var(--lumo-contrast-5pct) !important; }");

aetasoul commented

Hi, can you share how you tried to style the calendar?

From the V4.X it's not possible to modify the calendar's appearance by using css variables but you have to use a custom polymer class or adding a custom style via code

https://github.com/stefanuebe/vaadin_fullcalendar/wiki/FullCalendar-Examples#style-the-calendar

stefanuebe commented

As @aetasoul wrote, the initial mentioned approach is no longer supported in 4.x and thus I would close this ticket. In general I would always recommend the approach of subclassing the polymer template, as it will be less error prone regarding provided styles. The downside of this approach is, that the polymer subclass has to be converted to a Lit element somewhere in the future, when we change the calendar to Lit.

themeFor is currently not supported by the calendar, not sure if we can make it work in the future.

  • 👍1