如何配置FullCalendar年视图仅显示月份与周分组？

我想用FullCalendar库生成月视图或年视图，不显示每月的所有日期，仅按周分组展示（也就是每个月对应4或5列的周划分）。查了库文档和相关资料，没找到对应的配置方法。以下是我的代码和当前效果：

accesoAdmin.component.html 代码 #

<full-calendar [options]="calendarOptions"></full-calendar>

accesoAdmin.component.ts 代码 #

import { Component, Inject, Optional, ViewChild } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { CalendarOptions } from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

@Component({
  templateUrl: './accesoAdmin.component.html'
})
export class AccesoAdminComponent {

  @ViewChild(FullCalendarComponent)
  calendarComponent: FullCalendarComponent | undefined;

  public calendarOptions: CalendarOptions | undefined;

  constructor() {
  }

  ngOnInit(): void {
    this.initCalendar();
  }

  ngOnDestroy(): void {
  }

  ngAfterViewInit(): void {
  }

  private initCalendar() {
    this.calendarOptions = {
      locale: "es",
      schedulerLicenseKey: 'XXXXXX',
      initialView: 'resourceTimelineYear',
      timeZone: 'local',
      plugins: [resourceTimelinePlugin],
      weekNumbers: true,
      displayEventTime: false,
      height: '250px',
      resourceAreaColumns: [
        {
          field: 'title',
          headerContent: 'Simuladores'
        }
      ],
      resources: [
        {
          id: 'GESTLIC-4050',
          title: 'GESTLIC-4050'
        },
        {
          id: 'GESTLIC-4051',
          title: 'GESTLIC-4051'
        }
      ],
      events: [
        {
          id: 'event1',
          title: 'SAN AGUSTÍN',
          start: '2024-01-11T00:00:00',
          end: '2024-02-01T00:00:00',
          resourceId: 'GESTLIC-4050',
          color: 'red'
        },
        {
          id: 'event2',
          title: 'LA SALLE',
          start: '2024-01-18T00:00:00',
          end: '2024-02-08T00:00:00',
          resourceId: 'GESTLIC-4051',
          color: 'green'
        }
      ],
      headerToolbar: {
      },
      buttonText: {
        today: "Año actual",
        month: "Mes",
        day: "Día",
        week: "Semana",
        year: "Año"
      }
    };
  }
}

当前效果是显示带日期行的资源日历年视图，我希望隐藏日期行，仅按周划分展示月份。想问下能不能实现这种配置？

FullCalendar的资源时间线视图（resourceTimeline）本身没有直接配置项实现该需求，但可以通过以下两种方式达成目标：

1. 自定义CSS快速隐藏日期行 #

针对resourceTimelineYear视图，通过CSS定位日期相关元素并隐藏，同时调整月份列的视觉样式：

/* 隐藏日期单元格的文本内容 */
.fc-resourceTimelineYear-view .fc-col-header-cell-cushion,
.fc-resourceTimelineYear-view .fc-daygrid-day-number {
    display: none;
}
/* 调整月份列宽度，保证周分组的视觉效果 */
.fc-resourceTimelineYear-view .fc-col-header-cell {
    min-width: 70px;
}

注意：不同版本的FullCalendar类名可能略有差异，需根据实际DOM结构微调选择器。

2. 自定义视图实现按周分组展示 #

如果CSS方式不够灵活，可以基于resourceTimeline插件创建自定义年视图，强制按周作为插槽单位：

private initCalendar() {
  this.calendarOptions = {
    // 保留原有配置
    locale: "es",
    schedulerLicenseKey: 'XXXXXX',
    timeZone: 'local',
    plugins: [resourceTimelinePlugin],
    weekNumbers: true,
    displayEventTime: false,
    height: '250px',
    resourceAreaColumns: [
      {
        field: 'title',
        headerContent: 'Simuladores'
      }
    ],
    resources: [
      { id: 'GESTLIC-4050', title: 'GESTLIC-4050' },
      { id: 'GESTLIC-4051', title: 'GESTLIC-4051' }
    ],
    events: [
      {
        id: 'event1',
        title: 'SAN AGUSTÍN',
        start: '2024-01-11T00:00:00',
        end: '2024-02-01T00:00:00',
        resourceId: 'GESTLIC-4050',
        color: 'red'
      },
      {
        id: 'event2',
        title: 'LA SALLE',
        start: '2024-01-18T00:00:00',
        end: '2024-02-08T00:00:00',
        resourceId: 'GESTLIC-4051',
        color: 'green'
      }
    ],
    headerToolbar: {},
    buttonText: {
      today: "Año actual",
      month: "Mes",
      day: "Día",
      week: "Semana",
      year: "Año"
    },
    // 添加自定义视图配置
    views: {
      customWeekGroupedYear: {
        type: 'resourceTimeline',
        duration: { years: 1 },
        slotDuration: { weeks: 1 }, // 按周作为插槽单位
        slotLabelFormat: [
          { month: 'short', year: 'numeric' }, // 显示月份+年份
          { text: '周' }, { week: 'numeric' } // 显示周数
        ],
        // 隐藏日期级别的单元格内容
        dayCellContent: () => ''
      }
    },
    initialView: 'customWeekGroupedYear' // 使用自定义视图
  };
}

补充：JS原生没有getWeek()方法，周数计算可自行实现，或配置FullCalendar的weekNumberCalculator参数自定义周数规则。

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