在 FullCalendar 年视图中仅显示月份和星期

Question

我想使用 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: '0698780123-fcs-1691394982',
      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"
      }
    };
  }
}

有了这个，我明白了：

我想要的是消除天数的行，并且月份仅显示为除以周。

提前致谢！

Answer 1

这可以通过两个设置的组合来实现：slotLabelFormat和slotDuration

槽标签格式允许您指定（对于时间轴视图）标签的行数以及其中的内容。时段持续时间可让您指定每个时段（实际上是“时间轴”视图中的一列）所代表的时间量。

例如：

slotLabelFormat: [
  { month: "long" }, // top level of text
  { week: "short" } // lower level of text
],
slotDuration: { "weeks" : 1}

现场演示：https://codepen.io/ADyson82/pen/vYMvvQZ