1

Me gustaría generar un calendario con la librería FullCalendar que mostrara una vista mensual o anual y que, en lugar de mostrarme todos los días del mes, sólo me mostrara las semanas, es decir, la división por columnas de la tabla que incluye el calendario sería de 4 (ó 5 para algún mes) para cada mes del año.

¿Sabéis si es posible establecer esta configuración? Por más que he revisado la documentación de la librería y por más que he buscado, no he sido capaz de encontrar nada.

Gracias por adelantado.

EDITO:

Añado código y capturas de pantalla.

En mi fichero accesoAdmin.component.html, tengo:

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

Y en mi fichero accesoAdmin.component.ts, tengo:

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

Con esto, obtengo esto:

Calendario de recursos, vista anual

Y lo que me gustaría es eliminar la fila de los días y que los meses sólo aparecieran divididos por semanas.

¡Gracias de nuevo!

2
  • Recuerda que mas alla de todo, esa key no sirve mas, y debes avisar que fue expuesta y cambiarla.
    – gbianchi
    Commented el 26 abr. a las 11:58
  • Gracias, @gbianchi.
    – Spidermanu
    Commented el 29 abr. a las 6:41

2 respuestas 2

0

Para lograr que FullCalendar muestre solo las semanas en lugar de todos los días del mes, puedes configurar la vista mensual (month) para mostrar solo las semanas. Puedes lograr esto utilizando la propiedad fixedWeekCount y estableciéndola en false. Esto permitirá que FullCalendar muestre el número correcto de semanas para cada mes, ya sea 4 o 5, en lugar de mostrar todas las semanas completas.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    defaultView: 'dayGridMonth',
    fixedWeekCount: false, // Mostrar el número correcto de semanas para cada mes
    weekends: true, // Mostrar fines de semana
  });

  calendar.render();
});

Este ejemplo utiliza el plugin dayGrid, que es el que se encarga de mostrar la vista mensual.

1
  • 2
    Gracias por tu respuesta, @juancruz. He añadido información a mi post inicial, porque creo que no lo había explicado nada bien. Gracias de nuevo y disculpa las posibles molestias. Un saludo cordial.
    – Spidermanu
    Commented el 19 abr. a las 9:19
0

SOLUCIÓN AQUÍ.

Copio y traduzco:

Esto se puede lograr con una combinación de dos configuraciones: slotLabelFormat y slotDuration.

slotLabelFormat te permite especificar (para vistas Timeline) el número de filas de etiquetas y lo que hay dentro de ellas. slotDuration te permite especificar la cantidad de tiempo que representa cada espacio (de hecho, una columna en la vista Timeline).

Por ejemplo:

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

Demo: https://codepen.io/ADyson82/pen/vYMvvQZ

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.