eventTimeFormat not working in my fullcalendar library version 4

Question

I'm using a fullcalendar library inside a Salesforce lwc. I need to set the 24 hours format to my timegrid view as now its shown as 3pm, 4pm, etc. I tried adding the eventTimeFormat but it doesn't work. Also tried with the deprecated timeFormat :D. Show you my code if it could help :)

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

}

Expecting the hour format to change to 24 hour format.

Answer 1

SOLUTION: My timegrid view is working now with the 24 hour format. I was wrongly setting the eventTimeFormat (as this is just for events). What worked for me was slotLabelFormat. Show you the solution :)

    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 }