1

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

从文档中，使用 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实现了我的目标，但我似乎不知道为什么它在那里工作而不是在我的项目中。也许图书馆版本？我真的很感激任何见解。

4

3 回答 3

0

尝试

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

::ng-deep .cal-day-selected {
  background-color: deeppink!important;
}
于 2019-06-28T17:20:07.993 回答
0

重点是添加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
      };
于 2021-04-08T07:53:14.313 回答
0

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

::ng-deep {
    .lesson .cal-event {
        background-color: red;
        border-color: red;
        color: white;
    }
}
于 2020-08-18T16:00:11.857 回答