I don't understand the problem. Found the solution in the official documentation. I have version 5, and it shows AM, PM format. I need to change it to 24 hours. I found other ways to solve but not for version 5.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 1100,
initialView: 'timeGridWeek',
initialDate: '2021-06-18', // will be parsed as local
allDaySlot: false,
eventsTimeFormat: {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
meridiem: false
},
eventSources: [
// Events
{
events: [
{
title : 'SimulatorName',
start : '2021-06-18T12:30:00',
end: '2021-06-18T14:30:00',
},
{
title : 'SimulatorName',
start : '2021-06-13T12:30:00',
end: '2021-06-13T14:30:00',
},
{
title : 'SimulatorName',
start : '2021-06-13T15:30:00',
end: '2021-06-13T19:30:00',
},
],
color: 'silver',
textColor: 'black',
borderColor: 'black',
eventTimeFormat: { // like '14:30:00'
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
meridiem: false
},
},
],
});
calendar.render();
});
It's eventTimeFormat, not eventsTimeFormat. - as per https://fullcalendar.io/docs/eventTimeFormat . Always double-check your work carefully.
Also to get a 24hr display then, again as per the documentation (https://fullcalendar.io/docs/date-formatting, linked from the eventTimeFormat article), you need to specify hour12: false
eventTimeFormat: {
hour: "2-digit",
minute: "2-digit",
hour12: false
},
will get you a conventional 24hr display - e.g. 3.30pm will be displayed as 15:30.
Live demo: https://codepen.io/ADyson82/pen/VwpNRdo