如何在Angular中使用Fullcalendar获取指定年份范围内的所有周六和周日

第一步：通用周末获取工具方法 #

该段为纯TS逻辑，不需要依赖Fullcalendar，可直接复用：

/**
 * 获取指定年份范围内的所有周六、周日
 * @param startYear 起始年份 如2024
 * @param endYear 结束年份 如2025
 * @returns 所有周末的Date对象数组
 */
function getWeekendsInYearRange(startYear: number, endYear: number): Date[] {
  const weekends: Date[] = [];
  // 遍历年份范围内的每一天
  for (let year = startYear; year <= endYear; year++) {
    // 从当年1月1日开始
    const currentDate = new Date(year, 0, 1);
    // 遍历到当年12月31日
    while (currentDate.getFullYear() === year) {
      // getDay()返回值：0=周日，6=周六
      const dayOfWeek = currentDate.getDay();
      if (dayOfWeek === 0 || dayOfWeek === 6) {
        // 推入副本避免引用问题
        weekends.push(new Date(currentDate));
      }
      // 日期+1
      currentDate.setDate(currentDate.getDate() + 1);
    }
  }
  return weekends;
}

• 如果需要返回格式化的日期字符串，可以在推入数组的时候用toISOString()、toLocaleDateString()等方法按需处理。

第二步：结合Angular Fullcalendar使用示例 #

如果你需要把获取到的周末同步到Fullcalendar中做高亮、自定义事件等操作，可以参考以下逻辑：

import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent {
  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    // 单元格渲染钩子，可用于高亮周末
    dayCellDidMount: (info) => {
      const dayOfWeek = info.date.getDay();
      if (dayOfWeek === 0 || dayOfWeek === 6) {
        // 给周末单元格加自定义样式
        info.el.style.backgroundColor = '#f5f5f5';
      }
    },
    // 也可以把获取到的周末作为自定义事件加入日历
    events: this.getWeekendEvents(2024, 2025)
  };

  // 把周末转为Fullcalendar可识别的事件格式
  getWeekendEvents(startYear: number, endYear: number) {
    return getWeekendsInYearRange(startYear, endYear).map(date => ({
      title: '周末',
      start: date,
      allDay: true,
      backgroundColor: '#ffefef',
      borderColor: '#ffd0d0'
    }));
  }
}

• 以上代码适配@fullcalendar/angular v5/v6 版本，如果你使用的是旧版本，少量API调整即可兼容。

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