Angular中通过TypeScript操作CSS实现日历指定日期范围高亮

步骤1：在组件中定义高亮范围并标记日期状态 #

首先在CalendarComponent中添加要高亮的日期范围，并在生成日历日期项时，为每个日期添加是否在范围内的标记：

export class CalendarComponent implements OnInit {
  week: any = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];

  monthSelect: any[] | undefined;
  dateSelect: any;
  title: string | undefined;
  // 定义需要高亮的日期范围
  highlightStart = moment('2023-01-09');
  highlightEnd = moment('2023-05-23');
  highlightRange = moment.range(this.highlightStart, this.highlightEnd);

  constructor() {}

  ngOnInit(): void {
    this.getDaysFromDate(1, 2023);
  }

  getDaysFromDate(month: number, year: number) {
    const startDate = moment(`${year}/${month}/01`);
    const endDate = startDate.clone().endOf('month');
    this.dateSelect = startDate;
    const diffDays = endDate.diff(startDate, 'days', true);
    const numberDays = Math.round(diffDays);
    this.monthSelect = Object.keys([...Array(numberDays)]).map((a: any) => {
      a = parseInt(a) + 1;
      const dayObject = moment(`${year}-${month}-${a}`);
      return {
        name: dayObject.format("dddd"),
        value: a,
        indexWeek: dayObject.isoWeekday(),
        // 标记当前日期是否在高亮范围内
        isInRange: this.highlightRange.contains(dayObject)
      };
    });
  }

  changeMonth(flag: number) {
    if (flag < 0) {
      const prevDate = this.dateSelect.clone().subtract(1, "month");
      this.getDaysFromDate(prevDate.format("MM"), prevDate.format("YYYY"));
    } else {
      const nextDate = this.dateSelect.clone().add(1, "month");
      this.getDaysFromDate(nextDate.format("MM"), nextDate.format("YYYY"));
    }
  }
}

步骤2：在HTML中通过类绑定实现高亮 #

修改日历日期的渲染元素，使用Angular的[class.类名]语法，根据isInRange状态动态添加background类：

<div class="wrapper-calendar">
  <div class="header-calendar">
    <div>
      <button (click)="changeMonth(-1)" class="btn-prev"><img src="back.png" alt="back"></button>
    </div>
    <h1>{{dateSelect | date:'MMMM yyyy'}}</h1>
    <div>
      <button (click)="changeMonth(1)" class="btn-next"><img src="forward.png" alt="forward"></button>
    </div>
  </div>
  <ol>
    <li *ngFor="let day of week" class="day-name">{{day | slice:0:3}}</li>

    <li [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
        *ngFor="let day of monthSelect; let first = first"
        [class.background]="day.isInRange">
      <span> {{day?.value}}</span>
    </li>
  </ol>
</div>

步骤3：添加高亮样式 #

在组件的CSS文件中定义background类的样式，自定义高亮效果：

.background {
  background-color: #cce7ff; /* 自定义背景色 */
  border-radius: 50%; /* 可选，圆形高亮 */
  color: #1976d2; /* 自定义文字颜色 */
}

替代方案：使用方法动态判断 #

如果不想在生成日期时提前标记，也可以写一个方法实时判断日期是否在范围内：

在TS中添加方法：

isDateInHighlightRange(day: any): boolean {
  const currentDate = moment(`${this.dateSelect.year()}-${this.dateSelect.month()+1}-${day.value}`);
  return this.highlightRange.contains(currentDate);
}

然后HTML中调用方法：

<li [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
    *ngFor="let day of monthSelect; let first = first"
    [class.background]="isDateInHighlightRange(day)">
  <span> {{day?.value}}</span>
</li>

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