完整日历 (v5) 中不支持 24 小时时间格式

Question

我不明白这个问题。 在官方文档中找到了解决方案。 我有版本 5，它显示 AM、PM 格式。我需要将其更改为 24 小时。 我找到了其他方法来解决，但不适用于版本 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();
        });

Answer 1

是

eventTimeFormat

，不是

eventsTimeFormat

。 - 按照 https://fullcalendar.io/docs/eventTimeFormat 。始终仔细检查您的工作。

还要获得 24 小时显示，再次根据文档（https://fullcalendar.io/docs/date-formatting，从 eventTimeFormat 文章链接），您需要指定

hour12: false

eventTimeFormat: {
  hour: "2-digit",
  minute: "2-digit",
  hour12: false
},

将为您提供传统的 24 小时显示 - 例如3.30pm 将显示为 15:30。

现场演示：https://codepen.io/ADyson82/pen/VwpNRdo

Answer 2

对于V5

new FullCalendar.Calendar(document.getElementById('js-calendar'), {
    eventTimeFormat: {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    },
    slotLabelFormat: {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    },
    ....
});

Answer 3

var 日历 = new FullCalendar.Calendar(calendarEl, { 初始视图：'timeGridWeek'， 事件时间格式：{ 小时：“2 位数字”， 分钟：“2 位数字”， 12 小时：假 }, 槽标签格式：{ 小时：'2 位数字'， 分钟：'2 位数字'， 12 小时：假 } }