Angular 15中如何根据日期设置Full Calendar的moreLink背景色？

实现步骤： #

1. 定义区分样式的CSS类
   在组件的CSS文件中添加以下类，用来区分过去和未来日期的moreLink样式：

/* 过去日期的moreLink样式 */
.more-link-past {
  background-color: red !important;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 未来日期的moreLink样式 */
.more-link-future {
  background-color: blue !important;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

注：使用!important是为了覆盖FullCalendar默认的moreLink样式，也可以通过更具体的CSS选择器（如.fc-daygrid-day .fc-more-link.more-link-past）来提升优先级。

2. 修改dayCellDidMount回调逻辑
   在calendarOptions的dayCellDidMount函数中，新增对当前单元格内moreLink元素的处理，根据日期动态添加对应的样式类：

dayCellDidMount: function (cellInfo) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const cellDate = cellInfo.date;
  cellDate.setHours(0, 0, 0, 0);

  // 保留原单元格背景处理逻辑
  if (cellDate < today && cellInfo.el) {
    cellInfo.el.style.backgroundColor = "rgb(255,0,0, 0.050)";
  }

  // 定位当前单元格内的moreLink元素
  const moreLinkEl = cellInfo.el.querySelector('.fc-more-link');
  if (moreLinkEl) {
    // 先清除已有样式类
    moreLinkEl.classList.remove('more-link-past', 'more-link-future');
    
    // 根据日期判断添加对应类
    if (cellDate < today) {
      moreLinkEl.classList.add('more-link-past');
    } else if (cellDate > today) {
      moreLinkEl.classList.add('more-link-future');
    }
    // 如需单独设置今日的moreLink样式，可在此添加else分支
  }
},

原理说明： #

FullCalendar的moreLinkClassNames仅支持设置统一的静态类，无法根据日期动态区分。而dayCellDidMount回调会在每个日期单元格渲染完成后触发，我们可以通过该回调获取单元格的日期信息，同时通过DOM查询找到单元格内的moreLink元素，动态添加对应的样式类，从而实现按过去/未来日期区分moreLink样式的需求。

内容的提问来源于stack exchange，提问作者Jany