Я хотел бы создать календарь с библиотекой FullCalendar, который показывал бы ежемесячное или годовое представление и который вместо того, чтобы показывать мне все дни месяца, показывал бы мне только недели, то есть разделение по столбцам таблицы. включая календарь, будет 4 (или 5 для некоторого месяца) для каждого месяца года.
Знаете ли вы, возможно ли настроить эту конфигурацию? Сколько бы я ни просматривал документацию библиотеки и сколько ни искал, мне так и не удалось ничего найти.
Добавляю код и скриншоты.
В моем файле accessoAdmin.comComponent.html у меня есть:
<full-calendar [options] = "calendarOptions"></full-calendar>
И в моем файле accessoAdmin.comComponent.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"
}
};
}
}
При этом я получаю следующее:
И мне бы хотелось убрать ряд дней и чтобы месяцы отображались только разделенными на недели.
Заранее спасибо!
Этого можно добиться с помощью комбинации двух настроек: slotLabelFormat и slotDuration.
Формат метки слота позволяет указать (для представлений временной шкалы) количество строк меток и то, что находится внутри них. Продолжительность интервала позволяет указать количество времени, которое представляет каждый интервал (фактически столбец в представлении временной шкалы).
Например:
slotLabelFormat: [
{ month: "long" }, // top level of text
{ week: "short" } // lower level of text
],
slotDuration: { "weeks" : 1}
Живая демонстрация: https://codepen.io/ADyson82/pen/vYMvvQZ