I have been struggling a bit on Calendar Event styling so here’s some guidelines I wanna share on the topic.
First thigs first. If you want to style your Calendar events you should extend your theme (eg halo) and address the halo-ext.scss you find in web\themes.
Suppose you have two event ‘types’ to style differently… for example:
- Booking
- Unavailable
The Entity representing your CalendarEvents should have a property the Calendar will use as a StyleName. Suppose this property is called eventType.
1st Rule: The property used as styleName MUST be a string Datatype not an Enum
This adds some difficulties because probably you wanna make sure users don’t put anything they like in the eventType field.
Once you have done this you should declare your calendar in some screen accordingly. Something along the lines of:
<calendar id="eventCalendar"
captionProperty="caption"
datasource="eventsListDs"
descriptionProperty="description"
endDateProperty="endDate"
isAllDayProperty="allDay"
startDateProperty="startDate"
stylenameProperty="eventType">
</calendar>
Obviously all the properties must correspond to attributes of the datasource Entity.
Here comes the second hitch. Differently from what you find on the manual (see here) the style-named classes generated will not be named concatenating your styleName with a ‘dot’ separator but with a dash.
2nd Rule: custom styled classes names have your styleName concatenated with a DASH
In our use case you get two style classes called:
.v-calendar-event-unavailable {}
.v-calendar-event-booking {}
Now you wanna style those… well, let’s imagine you want ‘unavailable’ type events to be reddish in color. What worked for me is something like this:
.v-calendar-event-unavailable .v-calendar-event-caption {
color: #bb0000;
}
.v-calendar-event-unavailable .v-calendar-event-content {
background-color: rgba(255, 90, 53, 0.8) !important;
}
.v-calendar-event-unavailable::before {
color: #bb0000;
}
.v-calendar-event-unavailable-all-day {
background-color: rgba(255, 90, 53, 0.8);
color: #bb0000;
}
The ‘all-day’ class is used for all-day type events both in Month and Week views.
The ::before selector is needed to change the color of the little dot showed left of the event in Month view.
As for the .v-calendar-event-content class I couldn’t manage to change its background unless forcing it with !important. I don’t know why it’s like that, but if you don’t do it, you’ll always have freaking borders left and right of your event in the WRONG color. (see this headache here)
3rd Rule: don’t forget to force the background-color of event-content class of your styleNamed class
I hope you find this useful. Cheers!
