Show only months and weeks in FullCalendar year view

Question

I would like to generate a calendar with the FullCalendar library that would show a monthly or annual view and that, instead of showing me all the days of the month, would only show me the weeks, that is, the division by columns of the table that includes the calendar would be of 4 (or 5 for some month) for each month of the year.

Do you know if it is possible to configure this configuration? No matter how much I have reviewed the library's documentation and how much I have searched, I have not been able to find anything.

I add code and screenshots.

In my file accesoAdmin.component.html, I have:

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

And in my file accesoAdmin.component.ts, I have:

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"
      }
    };
  }
}

With this, I get this:

And what I would like is to eliminate the row of days and for the months to only appear divided by weeks.

Thanks in advance!

Answer 1

This can be achieved with a combination of two settings: slotLabelFormat and slotDuration

The slot label format lets you specify (for Timeline views) the number of rows of labels, and what's inside them. The slot duration lets you specify the amount of time each slot (effectively a column in the Timeline view) represents.

For example:

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

Live demo: https://codepen.io/ADyson82/pen/vYMvvQZ