【问题标题】:ReactJs dont work change date format to 24hoursReact Js 不起作用将日期格式更改为 24 小时
【发布时间】:2021-06-30 16:50:33
【问题描述】:

我尝试将完整的日历日期格式 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'));
}

查看:

【问题讨论】:

  • fullcalendar.io/docs/titleFormat - 根据文档,titleformat 控制标题,而不是事件。下面的答案是正确的,eventTimeFormat就是你需要的事件时间

标签: javascript reactjs fullcalendar fullcalendar-5


【解决方案1】:

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

【讨论】:

  • 是的,我使用的是 v5 版本。我尝试了你的方法,但不起作用。
  • ``` return ```
  • 完整日历版本 5.8。
  • 我需要左侧的时间已更改为 24 小时格式。
  • @ArturKhachatryan 如果您想更改网格左侧时间的格式,请使用fullcalendar.io/docs/slotLabelFormat。从您最初的问题来看,实际上并不清楚您在说什么时间。但是,如果您花时间仔细查看,文档中已经包含您需要的所有内容。
猜你喜欢
  • 1970-01-01
  • 2023-02-01
  • 1970-01-01
  • 2023-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-20
相关资源
最近更新 更多