ReactJs 不起作用将日期格式更改为 24 小时

时间:2021-06-30 16:50:33

标签: javascript reactjs fullcalendar fullcalendar-5

我尝试将我的完整日历日期格式 AM、PM 更改为 24 小时。我阅读了官方文档,发现 titleFormat={hour12:false} 是 24 小时格式的解决方案。但我尝试这不起作用。也许遇到这种问题的人可以提供帮助。

这是我的 reactJs 组件代码

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid';
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

export default class Calendar extends Component {
    // declare any necessary functions such as handleDateClick, etc.
    render() {
        const events = [{ title: "today's event", date: new Date() }];
        return <FullCalendar
            initialView='timeGridWeek'
            headerToolbar={{
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek'
            }}
            titleFormat={{
                hour12: false
            }}
            events={events}
            plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
            allDaySlot={false}
            editable={true}
            timeFormat="H:mm"
        />
    }


}
if (document.getElementById('calendar')) {
    ReactDOM.render(<Calendar />, document.getElementById('calendar'));
}

查看: enter image description here

1 个答案:

答案 0 :(得分:1)

如果您使用的是 fullcalendar 的 v5(最新),我相信您正在寻找的选项是 eventTimeFormat:{ hour12: false }。如果您使用的是其他版本,则可能是其他版本。