为什么WeekDay cssClass属性不起作用？

Question

我正在尝试使用angular-calendar在周视图中设置所选日期的样式。

在docs中，使用dayHeaderClicked($event)应该可以将cssClass属性添加到$event.day，但是，这似乎对我不起作用。

我的代码如下所示：

​

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>

​

这段代码输入的是，如果没有问题，console.log(天)会显示带有cssClass属性的对象，但是用HTML检查器检查元素的类不会改变。我尝试过仅使用$event作为参数，但也不起作用。

这个plunker实现了我的目标，但我似乎不知道为什么它在那里工作，而不是在我的项目中。也许是库版本？我真的很感谢你的见解。

Answer 1

试一试

1)添加ViewEncapsulation.None <--可能需要也可能不需要

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

Answer 2

我也有同样的问题，但它实际上是有效的。您需要在cal event-container上检查更高的级别。您的类就添加到那里了。然后，您可以通过在::ng-deep中添加您的样式来自定义事件。例如

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

Answer 3

重点是将span添加到css选择器：

不工作：

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

Working示例：

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

事件定义：

      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
      };