Stylising my implementation of CalendarEvent

Good morning folks.

I’ve created a TruckEvent extending com.vaadin.ui.components.calendar.event.CalendarEvent just to show them in the Calendar. Everything works fine. But speaking about style terms, I want to go ahead and do the following: for each different truck generating an event entry in the calendar, I want to fill it with a background color.

As far as I know, I must edit a SCSS file, add my custom values and build the new theme. I’ve looked in here in the section called “Event Style” and it seems I must do the following:

TruckEvent event = new TruckEvent("A truck"); event.setStyleName("mycolor"); calendar.addEvent(event); Then, with the new style “mycolor”, edit in the SCSS: .v-calendar .v-calendar-event-mycolor {} .v-calendar .v-calendar-event-mycolor-all-day {} .v-calendar .v-calendar-event-mycolor .v-calendar-event-caption {} .v-calendar .v-calendar-event-mycolor .v-calendar-event-content {} The only thing I wanna do is give the event a background color depending on an Integer.

This is in theory. In practice, my TruckEvent class contains the following method: @Override public String getStyleName() { return "furgonetaEvento"+tipoFurgoneta; } So I have several CSS rules called from “furgonetaEvento1” to “furgonetaEvento20”, say. And within my SCSS, I have these:


.v-calendar-event-furgonetaEvento1 .v-calendar-event-content {
background-color: #0099FF;

.v-calendar-event-furgonetaEvento2 .v-calendar-event-content {
    background-color: #66FF66;


.v-calendar-event-furgonetaEvento20 .v-calendar-event-content {
    background-color: #073e5a;

[/code]Having run my webapp, using the developer console I have confirmed that in every TruckEvent in Html the style “furgonetaEventoX” (where X is a number from 1 to 20) is assigned correctly, this is, I can read it in class=“furgonetaEvento1”. But, anyway, the event is not colored with my color especified in the SCSS (and yes, after saving the SCSS file I’ve compiled the Theme).

What am I doing wrong?

Thanks in advance!

I’ve realised that there are several built-in colorswithin Valo theme: color1, color2, color3, color4 and color5 (I guess there are no further colors available). So, I’ve changed the getStyleName() returning String to “color”+tipoFurgoneta and now it works.

However, I still want to introduce my colors. How can i generate this CSS from a SCSS file?

.cavwebapp .v-calendar-week-wrapper .v-calendar-event[class*=“color4”]
.v-calendar-event-content {
background-color: #f1d3cb;
background-color: rgba(241, 211, 203, 0.8);


I’ve change my SCSS rules to .v-calendar .v-calendar-event-furgonetaX .v-calendar-event-content {…} (where X is a number from 1 to 20.

Suprisingly, when debugging the webapp with chrome I’ve realised that there is a rule which is loaded on top of my custom CSS rule. So, first the page is as follows:

…and after unchecking “.cavwebapp .v-calendar-week-wrapper .v-calendar-event .v-calendar-event-content”, “.cavwebapp .v-calendar-week-wrapper .v-calendar-event .v-calendar-event-content” gets activated:

Can someone tell me how to avoid this problem? Thanks

I’m encountering the same problem. Would be very grateful for some help too!