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.
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 }