如何将@fullcalendar/react时格周/日视图的24:00改为00:00？

FullCalendar默认的24小时格式化逻辑会将当日最后一个时间槽显示为24:00，要改成00:00，你可以通过自定义slotLabelFormat函数替代原配置对象来实现。

修改你的views配置中的slotLabelFormat部分，替换为以下逻辑：

views={{
    dayGridMonth: {},
    timeGridWeek: {
        allDaySlot: false,
        // 自定义时间槽标签格式化函数
        slotLabelFormat: function(date) {
            const hour = date.getHours();
            // 捕获小时为24的特殊情况，替换为00
            const formattedHour = hour === 24 ? '00' : hour.toString().padStart(2, '0');
            const formattedMinute = date.getMinutes().toString().padStart(2, '0');
            return `${formattedHour}:${formattedMinute}`;
        },
        dayHeaderFormat: {
            weekday: 'long',
            day: '2-digit',
        },
    },
    timeGridDay: {
        allDaySlot: false,
        // 复用相同的格式化逻辑
        slotLabelFormat: function(date) {
            const hour = date.getHours();
            const formattedHour = hour === 24 ? '00' : hour.toString().padStart(2, '0');
            const formattedMinute = date.getMinutes().toString().padStart(2, '0');
            return `${formattedHour}:${formattedMinute}`;
        },
        dayHeaderFormat: {
            weekday: 'long',
            day: '2-digit',
        },
    },
}}

逻辑说明 #

FullCalendar在渲染当日最后一个时间槽时，会将对应时间对象的小时值设为24（代表次日0点），通过自定义格式化函数捕获这个特殊值，将24替换为00，就能实现你想要的显示效果。

内容的提问来源于stack exchange，提问作者Tushar Sahoo