Why is WeekDay cssClass property not working?

Question

I'm trying to style the selected day in a week view using angular-calendar.

From the docs, using dayHeaderClicked($event) it should be possible to add a cssClass property to $event.day, however, it does not seem to work for me.

My code looks like this:

setDate(day: WeekDay): void {
    if (!day.isPast) {
      this.viewDate = day.date;
      this.requestForm.get('date').setValue(day.date);
      if (this.previousDate) {
        delete this.previousDate.cssClass;
      }
      day.cssClass = 'cal-day-selected';
      console.log(day);
      this.previousDate = day;
    }
}

.cal-day-selected {
  background-color: deeppink!important;
}

<mwl-calendar-week-view class="col-7" (dayHeaderClicked)="setDate($event.day)" [locale]="'es'"[viewDate]="viewDate">
</mwl-calendar-week-view>

The code is entering the if perfectly, the console.log(day) displays the object with the cssClass property but checking with the HTML inspector the class of the element doesn't change. I've tried using only $event as param and it does not work either.

This plunker accomplishes my goal but I can't seem to know why it works there and not in my project. Maybe library versions? I would really appreciate any insights.

score 0 · Answer 1 · answered Jun 28 '19 at 17:20

0

Try

1) add ViewEncapsulation.None <-- it may or may not be required

::ng-deep .cal-day-selected {
  background-color: deeppink!important;
}

answered Jun 28 '19 at 17:20

Mahi

3,748
4
35
70

It has: @Component({ selector: 'app-trip-request-form', templateUrl: './trip-request-form.component.html', styleUrls: ['./trip-request-form.component.css'], encapsulation: ViewEncapsulation.None }) I added ::ng-deep, still not working – Johnny Beltran Jun 28 '19 at 17:42
Still not working and it makes the calendar display as a time table instead of a single row containing the days of the week – Johnny Beltran Jun 28 '19 at 18:14

score 0 · Answer 2 · answered Aug 18 '20 at 16:00

I had the same issue, however it was actually working. You need to check a few levels higher on the cal-event-container. Your class is added there. You can then customise the event by adding your style inside ::ng-deep. For example

::ng-deep {
    .lesson .cal-event {
        background-color: red;
        border-color: red;
        color: white;
    }
}

score 0 · Answer 3 · answered Apr 08 '21 at 07:53

The point is add span to css selector:

Not working:

.my-class {
  color: $white !important;
  border-color: $primary;
}

Working example:

.my-class span {
  color: $white !important;
  border-color: $primary;
}

Event defininion:

      const value: CalendarEvent = {
        start: r?.start ? this.getMomentFromTime(r?.start).toDate() : new Date(),
        end: r?.end ? this.getMomentFromTime(r?.end).toDate() : new Date(),
        color: {
          primary: this.comConstants.colorInfo,
          secondary: this.comConstants.colorSecondary
        },
        draggable: false,
        resizable: {
          beforeStart: false,
          afterEnd: false
        },
        cssClass: 'my-class',
        title: 'Booked  [' + r.id + ']', // FIXME: Translate
      };

Why is WeekDay cssClass property not working?

3 Answers3

Try