尝试

Question

我正在尝试使用角度日历在一周视图中设置所选日期的样式。

在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（day）将显示具有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;
}

工作示例：

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

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

3 个答案:

尝试