问题：Fullcalendar 将 24 显示为午夜而不是 00:00答案

【问题标题】：Issue: Fullcalendar shows 24 as midnight instead of 00:00问题：Fullcalendar 将 24 显示为午夜而不是 00:00
【发布时间】：2020-04-14 12:02:23
【问题描述】：

出于某种原因，Fullcalendar 将显示从午夜开始的事件，例如'24:15'。我们希望它显示“00:15”。我认为这是一个新问题，因为我们已经有了一年的日历，这是我第一次听到它。但我找不到任何关于如何解决它的信息。

我们使用的是 fullcalendar v4.2.0。我没有编写原始代码，但我对它相当熟悉。我们使用 REST API 获取事件，并且我们使用的是 ServiceNow。当使用 12 小时格式 (am/pm) 时，它显示 12a15。我尝试更改 eventTimeFormat，但没有运气。这是客户端脚本的一部分：

    /* Calendar */
c.funcs.loadCalendar = function() {
    var calendarEl = document.getElementById('calendar');
    c.calendar = new FullCalendar.Calendar(calendarEl, {
        contentHeight: 'auto',
        plugins: [ 'dayGrid','timeGrid', 'list'],
        header: {
            left: 'prev next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listMonth'
        },
        buttonText: {
            dayGridMonth: 'Month',
            timeGridWeek: 'Week',
            timeGridDay: 'Day',
            listWeek: 'List Week',
            listMonth: 'List Month',
            today: 'Today'
        },
        editable: false,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        eventOverlap: false,
        firstDay: 1,
        weekNumbers: true,
        // Scripted REST API which sends Start and End date-time of current view as parameters and gets current events. 
        //events: '/api/tnas/fullcalendar_fetch_data',

        events: function(info, successCallback, failureCallback) {
            $http({
                method: 'GET',
                url: '/api/tnas/fullcalendar_fetch_data',
                headers: {
                    'X-UserToken': window.g_ck // Authorization
                },
                params: {
                    systems: c.vars.selectedSystems.map(function(system) { return system.value; }).toString(),
                    excludedTypes: c.vars.types.filter(function(type) {return !type.checked}).map(function(type) { if(!type.checked) return type.type   }).toString(),
                    start: info.start,
                    end: info.end
                }
            }).success(function(data, status) {
                successCallback(data.result.events);
            }).error(function(data, status) {failureCallback(data)});
        },
        loading: function(isLoading) {
            c.vars.calendarIsLoading = isLoading;
            $scope.$evalAsync();
        },
        // When event is rendered and put into the DOM, add a tippy.js tooltip to that element.
        eventRender: function(info) {
            tippy(info.el, {
                theme: 'light-border',
                content: info.event.extendedProps.tooltipContent,
                arrow: true,
                animation: 'fade',
                flip: false,
                boundary: 'window'
            });
        },
        eventClick: function(info){
            info.jsEvent.preventDefault();
            var p = $scope.data.page_id || 'form';
            var url = '/sp?id=' + p + '&table=' + info.event.extendedProps.table + '&sys_id=' + info.event.id + '&view=sp';
            window.open(url, "_blank");
        },
        navLinks: true,
        navLinkDayClick: function(date, jsEvent) {
            //c.calendar.gotoDate(date);
            c.calendar.changeView('timeGridDay', date);
        }
    });

    c.calendar.render();
}
/* Calendar End */

事件的 JSON：

title: "Metro IN-Applikasjoner - test"
number: "SREL0004789"
start: "2020-04-15 00:15:00"
end: "2020-04-16 14:00:00"
downtime_start: ""
downtime_end: ""
className: "SystemRelease"
type: "system_release"
table: "release"
id: "4a393c2b298c54903eaa786081948e7c"
state: "New"
state_reason: null
downtime_type: "Soft"
color: "rgb(163, 222, 255, 0.5)"
tooltipContent: "<div style='text-align:left; font-size:1.5em'><p>Metro IN-Applikasjoner - test</p><p><strong>Start:</strong>   00:15, 15. apr 20</p><p><strong>End:</strong>   14:00, 16. apr 20</p></div>"

希望以前有人遇到过同样的问题。非常感谢任何帮助！

【问题讨论】：

您能否举例说明导致此问题的实际事件数据？请以 JSON 格式接收 fullCalendar 的方式。谢谢
@ADyson 我现在已将 JSON 事件添加到帖子中。从成功的回调中记录，“data.result.events”。
可能与hourCycle有关，可能会挂起检测到的语言。在Intl.DateTimeFormat options 中，小时周期为24，则00 显示为24。小时周期23 显示00。检测到的语言会导致值发生变化。 FullCalendar 混合使用了看起来像精简版的 moment.js 和 Luxon，而 Luxon 大量使用 Intl 对象来实现其功能。只是猜测……console.log(new Date(2020,0).toLocaleString('en',{hourCycle: 'h24'}););
另见Intl.DateTimeFormat shows time being 24:59。
@AstridK.M.很高兴你解决了。您应该在下面的“答案”部分正确添加它，以便其他人可以对其进行投票，因此其他有相同问题的人可以更轻松地找到解决方案（因为具有已接受答案的问题在搜索中出现的频率更高）。另见stackoverflow.com/help/self-answer。谢谢。

标签： javascript date fullcalendar date-formatting fullcalendar-4

【解决方案1】：

已修复：将 hour12 属性替换为 eventTimeFormat 中的 hourCycle: 'h23' 成功了！

    eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        hourCycle: 'h23'
    },

【讨论】：