如何更改FullCalendar中未选择日期的bgcolor

Question

我正在为Angular项目使用FullCalendar。我想将未选择日期的背景颜色更改为默认值。

在HTML中<full-calendar #calender [options]="calendarOptions"></full-calendar>

在TS中：

calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
dateClick: this.onDateClick.bind(this),
validRange: {
start: new Date()
},
selectable:false
};

onDateClick(res: any) { 
this.now=res.date;
res.dayEl.style.backgroundColor='lightBlue';
}

当我单击日期时，它会将特定日期的背景颜色更改为浅蓝色，但会更改之前选择的所有日期。参见示例屏幕截图

Answer 1

完整日历已经有了一个类：.fc .fc-highlight

使用css覆盖，而不是使用JS来设置颜色。

.fc .fc-highlight{
background-color: lightblue;
}

如果你是angular的新手，并尝试在组件中使用这种风格，那么如果没有::ng-deep{}，它将无法工作

https://angular.io/guide/component-styles#component-造型最佳实践