Time slot labels start at 24:00 instead of 00:00 in Chrome with "hour12:false"

[spatertot]

When the calendar is in timeGridWeek and the slotLabelFormat has 'hour12:false' the first slot is now 24:00 instead of 00:00.
https://codepen.io/spatertot/pen/ExjQJLN?editors=0010

[spatertot]

After further testing, this issue exists in chrome but not firefox

[LuisSanches-GitHub]

The issue exists in both 12 hour mode and 24 hour mode.
Both the slotLabelFormat & eventTimeFormat have this problem when in timeGridWeek
In 12 hour mode: 12:00am & 12:30am is displayed instead of 00:00 & 00:30
In 24 hour mode: 24:00 & 24:30 is displayed instead of 00:00 & 00:30

The beginning of a day in 12 hour or 24 hour should always be 00:00.

In my view, 12:00am and 24:00 should only be used to signify the END of a day - they are analogous to 00:00 in the following day.

var calendar = new FullCalendar.Calendar(calendarEl, { plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], defaultView: 'timeGridWeek', slotLabelFormat: { hour: 'numeric', minute: '2-digit', omitZeroMinute: false, hour12: false }, eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false }, events: [{title: 'Title',backgroundColor: 'green',borderColor: 'green',start: '2020-03-08 00:00:00',end: '2020-03-08 00:30:00',id: '9',className: '6228'},{title: 'Title',backgroundColor: 'green',borderColor: 'green',start: '2020-03-08 00:30:00',end: '2020-03-08 01:00:00',id: '37',className: '6229'}]

[acerix]

Thanks, confirmed.

Another way to get 24 hour format is to set the locale to 'en-GB' which doesn't have this issue:

https://codepen.io/acerix/pen/poJLJyb?editors=0010

Or you could use a plugin like moment.js for more control over the format.

https://fullcalendar.io/docs/moment-plugins

[arshaw]

this behavior is dependent on the locale. as @acerix mentioned, set your locale to one that has this behavior, like 'en-gb'

[rgolekar]

Use of locale is the only option to resolve this issue? Will it cause any other functionality to change like event time format/zone etc?

[rishavjain25]

Using "en-GB" as locale changed the format of how days(column header) are displayed in weekly view i.e they are displayed as ddd D/M (Mon 28/2) but i need it to be of format ddd M/D (Mon 2/22)

[babymaychen]

How to solve this problem when I want to set the local to zh-cn?

[selahattinunlu]

This is really weird issue. I tried to fix this issue using eventContent hook but I must handle too many things if I use this method.
The issue is fixed when I set en-GB to locale. But why I need to set this locale, really weird :D

By thy way, @rishavjain25, you can fix the day format by adding dayHeaderContent option into options.

dayHeaderContent: (arg) => {
    return moment(arg.date).format("YYYY-MM-DD"); // change format as you want of course
},

https://fullcalendar.io/docs/day-header-render-hooks

[YllzaCanaj]

On v5 you can do this:

slotLabelFormat={[
{
hour: "2-digit",
minute: "2-digit",
meridiem: false,
},
]}

[Troy-Yang]

Workaround is to customize the timeslot label:

const MID_NIGHT = '24:00';
const START_TIME = '00:00';

const TimelineLabelContent = ({ timeFormat, date }: { timeFormat: TimelineTimeFormat, date: Date }) => {
const timeString = shortTimeOf('en-US', {
timeFormat,
})(date.toISOString());
return (
{timeString === MID_NIGHT ? START_TIME : timeString}
);
};

export const shortTimeOf = (
locale: string = DEFAULT_LOCALE,
options?: { timeFormat: TimelineTimeFormat }) => (datetime: string) => {
const { timeFormat = TimelineTimeFormat.TWENTY_FOUR_HOURS } = options || {};
return new Intl.DateTimeFormat(locale, {
hour12: timeFormat === TimelineTimeFormat.TWELVE_HOURS,
hour: 'numeric',
minute: 'numeric',
timeZone: 'UTC',
}).format(new Date(datetime));
};

[gmaddox]

If you tap into the slot render hook for the label content, you can overwrite the text value before it is rendered:

slotLabelFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
},
slotLabelContent: info => {
    if (info.text === '24:00') {
        info.text = '00:00';
    }
},

[suleymanmv]

          slotLabelContent={(info) => {
            if (info.text.split(":")[0] === "24") {
              info.text = `00:${info.text.split(":")[1]}`;
            }
          }}

[madly0894]

I think this is the good solution without any condition

slotLabelFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
},
slotLabelContent: info => info.text.replace(/24:00/g, '00:00');

[juwul]

Thanks, confirmed.

Another way to get 24 hour format is to set the locale to 'en-GB' which doesn't have this issue:

https://codepen.io/acerix/pen/poJLJyb?editors=0010

Or you could use a plugin like moment.js for more control over the format.

https://fullcalendar.io/docs/moment-plugins

Thanks for the codepen 👌🏼
It is a weird issue, and in my opinion, it should be changed to default work without setting the local.
But I have made it work with the following configuration:

slotDuration: '00:15:00',
slotLabelInterval: '01:00',
slotMinTime: '00:00:00',
slotMaxTime: '24:00:00',
scrollTime: '00:00:00',
locale: userCountry === 'US' ? 'en-US' : 'en-GB',
firstDay: userCountry === 'US' ? 0 : 1,
slotLabelFormat: userCountry === 'US' ?
    { // am pm time
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
    }
    : { // military time
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    },
eventTimeFormat: userCountry === 'US' ?
    { // am pm time
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
    }
    : { // military time
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    },