渲染后，事件未以 24 小时格式完整日历显示

Question

我已经启动了 fullCalendar，配置如下

  config: {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
    // axisFormat: 'HH',
    slotLabelFormat:"HH:mm",
    defaultView: 'timeGridWeek',
    allDaySlot: false,
    slotDuration: '00:60:00',
    columnFormat: 'dddd',
    columnHeaderFormat: { weekday: 'short' },
    defaultDate: '1970-01-01',
    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    eventLimit: true,
    eventOverlap: false,
    eventColor: '#458CC7',
    firstDay: 1,
    height: 'auto',
    selectHelper: true,
    selectable: true,
    timezone: 'UTC',
    header: {
      left: '',
      center: '',
      right: ''
    },
    editable: true,
    events: null,
    eventTimeFormat: { // like '14:30:00'
      hour: '2-digit',
      minute: '2-digit',
      meridiem: false
    }
  },

并且我正在尝试以 24 小时格式显示具有开始和结束时间的事件。但它们以 12 小时格式呈现。下面是我目前得到的输出，最后一张图片是我真正想要的输出。

这就是事件呈现给日历的方式。

renderEvents () {
  const schedule = JSON.parse(this.schedule)
  const calendarWeek = this.currentCalendarWeek()
  const days = Object.keys(schedule)

  days.forEach((weekDay) => {
    const day = schedule[weekDay]
    if (day.length != 0) {
      day.forEach((event) => {
        const start = event.split('-')[0]
        const end = event.split('-')[1]

        const addEvent = {
          id: this.generate_random_string(4),
          start: moment(`${calendarWeek[weekDay]} ${start}`, 'YYYY-MM-DD HH:mm')._i,
          end: moment(`${calendarWeek[weekDay]} ${end}`, 'YYYY-MM-DD HH:mm')._i
        }
        this.calendar.addEvent(addEvent)
      })
    }
  })
},

并且 this.schedule 是

  schedule: JSON.stringify({
    Monday: ['08:00-18:00'],
    Tuesday: ['08:00-18:00'],
    Wednesday: ['08:00-18:00'],
    Thursday: ['08:00-18:00'],
    Friday: ['08:00-18:00'],
    Saturday: [],
    Sunday: []
  }),

即使在添加新事件时。它不是 24 小时制

我如何才能得到这样的输出。

Answer 1

要获得 24 小时格式，您有两种方法。

您可以

1) 在您的 eventTimeFormat 中设置 hour12: false 选项，例如

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

演示：https://codepen.io/ADyson82/pen/xxwdNYa

（eventTimeFormat documentation does describe this, but a bit inaccurately / unclearly. The general fullCalendar date formatting documentation 使它更清楚，如果你检查那里。）

或

2) 由于您已经在使用 momentJS 插件（并且已经使用它来设置您的插槽的时间格式），您可以使用与您已经为 slotLabelFormat:

eventTimeFormat: "HH:mm"

演示：https://codepen.io/ADyson82/pen/KKdmLbv

渲染后，事件未以 24 小时格式完整日历显示

after rendering, events not being shown in 24 hour format Full Calendar

javascript

fullcalendar

fullcalendar-4