Angular-calendar: Event doesn't get styling on cssClass

[ezequieltejada]

Describe the bug

After adding the CSS to the CLI like described here, set the "cssClass" like this

return {
              start: new Date(appointmentObject.appointmentDate),
              title: appointmentObject.appointmentFullName,
              meta: {
                customerPhone: appointmentObject.appointmentClientPhone,
                customerName: appointmentObject.appointmentFullName,
                appointmentStatus: appointmentObject.status,
                appointmentJobs: appointmentObject.appointmentJob,
                appointmentEmployee: appointmentObject.appointmentEmployee,
                appointmentDate: appointmentObject.appointmentDate
              },
              color: appointmentObject.status === 'confirmed' ? this.colors.confirmed : this.colors.notConfirmed,
              cssClass: 'appointment-detail',
            }

and add the css in the angular component as described here,

div.appointment-detail .cal-event-title {
    color: white !important;
    background-color: yellow ;
}

But the event doesn't get the styling, no mather how specific I get in the selector.

Minimal reproduction of the problem with instructions

Screenshots

Versions

• "@angular/core": "^6.0.3",
• "angular-calendar": "^0.26.3",
• Browser name and version: Chromium Version 65.0.3325.181 (Official Build) Built on Ubuntu , running on LinuxMint 17 (64-bit)

[mattlewis92]

Without a repro it's impossible to say for sure, but it sounds like you're including the css in a local component rule which is scoped to that component. You need to either include the css rule in your apps global stylesheet (styles.css in the angular cli) or set encapsulation: ViewEncapsulation.None on your component. There's a working example you can follow here: https://mattlewis92.github.io/angular-calendar/#/custom-event-class Hope that helps! 😄

[alighori]

Hi, I need to add a custom css class in the event to manage the width of the event according to the data, like pass a css class from here condition based.
{
start: subDays(startOfDay(new Date()), 1),
end: addDays(new Date(), 1),
title: 'A 3 day event',
color: colors.gray,
actions: this.actions,
allDay: true,
resizable: {
beforeStart: true,
afterEnd: true
},
draggable: false
}