eventTimeFormat 在我的全日历库版本 4 中不起作用

Question

我在 Salesforce lwc 中使用全日历库。我需要将 24 小时格式设置为我的时间网格视图，因为它现在显示为下午 3 点、下午 4 点等。我尝试添加 eventTimeFormat，但它不起作用。还尝试使用已弃用的 timeFormat :D。如果有帮助，请向您展示我的代码:)

// imports ...
import fullcalendar from "@salesforce/resourceUrl/fullcalendar";

export default class WeeklyWorkSummaryFullCalendar extends LightningElement {
    calendar;
    fullCalendarInitialized = false;
    consultantId;
    deliveryProjects;
    eventsData = [];

    @api weekView;
    @api dayView;
    @api listView;
    @track
    calendarLabel;

    @wire(getConsultantCoachingProjectsForYear)
    wiredConsultantSolutionsForYear({ error, data }) {
        if (data) {
            this.deliveryProjects = data;
            this.eventsData = data.map(project => {
                // go through the data for events
            });
            this.calendar.addEventSource(this.eventsData);
            console.log(this.eventsData);
            this.calendar.render();
        } else if (error) {
            console.error(error);
        }
    }

    connectedCallback() {
        this.addEventListener('fceventclick', this.handleEventClick.bind(this));
    }

    renderedCallback() {
        if (this.fullCalendarInitialized) {
            return;
        }
        this.fullCalendarInitialized = true;

        Promise.all([
            loadScript(this, fullcalendar + "/packages/core/main.js"),
            loadStyle(this, fullcalendar + "/packages/core/main.css"),
        ])
            .then(() => {
                // got to load core first, then plugins
                Promise.all([
                    loadScript(this, fullcalendar + "/packages/daygrid/main.js"),
                    loadStyle(this, fullcalendar + "/packages/daygrid/main.css"),
                    loadScript(this, fullcalendar + "/packages/list/main.js"),
                    loadStyle(this, fullcalendar + "/packages/list/main.css"),
                    loadScript(this, fullcalendar + "/packages/timegrid/main.js"),
                    loadStyle(this, fullcalendar + "/packages/timegrid/main.css"),
                    loadScript(this, fullcalendar + "/packages/interaction/main.js"),
                    loadScript(this, fullcalendar + "/packages/moment/main.js"),
                    loadScript(this, fullcalendar + "/packages/moment-timezone/main.js"),
                ]).then(() => {
                    console.log("Library Initialized!");
                    this.init();
                });
            })
            .catch(error => {
                console.log("error", error);
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: "Error loading FullCalendar",
                        variant: "error"
                    })
                );
            });
    }

    init() {
        var calendarEl = this.template.querySelector(".calendar");
        this.calendar = new FullCalendar.Calendar(calendarEl, {
            header: false,
            plugins: ["dayGrid", "list", "timeGrid", "interaction", "moment", "moment-timezone"],
            defaultView: 'timeGridWeek',
            firstDay: 1,
            allDay: false,
            hour12: false
        });

        this.calendar.render();
        this.calendarLabel = this.calendar.view.title;
    }

}

期待小时格式更改为 24 小时格式。

Answer 1

解决方案： 我的时间网格视图现在可以使用 24 小时格式。我错误地设置了 eventTimeFormat（因为这仅适用于事件）。对我有用的是 slotLabelFormat。告诉你解决方案:)

    header: false,
    plugins: ["dayGrid", "list", "timeGrid", "interaction", "moment", "moment-timezone"],
    defaultView: 'timeGridWeek',
    firstDay: 1,
    minTime: '00:00:00',
    maxTime: '21:00:00',
    slotLabelFormat: { hour: 'numeric', minute: '2-digit', hour12: false }