如何更改react-big-calender顶部的日期格式

问题描述

我在我的项目中使用了react-big-calender，现在我只使用了日视图，并想根据当前需要（如9月2日星期三）显示自定义日期格式，我想要的是2020年9月2日，我找不到任何可以操纵的道具，这对我的代码很有帮助

import React,{ useState,useEffect } from 'react';
import { Calendar,momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import { Box } from './styled';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { changeAppointment } from '../api';

export default function Calender(props) {
    const { date } = props;
    const { data } = props;
    const localizer = momentLocalizer(moment);
    const DnDCalendar = withDragAndDrop(Calendar);
    const [events,setEvents] = useState([]);

    useEffect(() => {
        let tempEvents = [];
        data.forEach((element) => {
            const data = {
                title: element.patient.name + ',' + element.patient.phone,id: element.id,start: moment.utc(element.datetime).toDate(),end: moment.utc(element.datetime).add(30,'minutes').toDate(),};
            tempEvents.push(data);
            setEvents(tempEvents);
        });
    },[data]);

    const onEventResize = (data) => {
        const { start,end,event } = data;
        const newEvents = [...events];
        newEvents.forEach((existingEvent) => {
            if (existingEvent.id === event.id) {
                existingEvent.start = start;
                existingEvent.end = end;
                const info = {
                    id: event.id,datetime: moment.utc(start).format(),};
                changeAppointment(info)
                    .then((info) => {
                        console.log(info,"infoo")
                    }).catch((err) => {
                        console.log(err,"error")
                    })
            }
        });
        setEvents(newEvents);
    };

    return (
        <Box>
            <DnDCalendar
                localizer={localizer}
                defaultDate={date}
                defaultview="day"
                timeslots={1}
                view={'day'}
                views={{
                    day: true,}}
                min={new Date(0,9,0)}
                max={new Date(0,23,30,0)}
                events={events}
                localizer={localizer}
                onEventDrop={onEventResize}
                onEventResize={onEventResize}
                resizable
                step={30}
                selectable={true}
            />
        </Box>
    );
}

我已经附加了一个文件，以显示我在谈论的日期

解决方法

您可以使用smooth = data.groupby(level=['site','sn','height']). \ rolling(mins,min_periods=min_periods,win_type=win_type,on='timestamp').mean() 道具来做到这一点。它具有多种日期显示格式的选项，具体取决于您当前查看的formats。

http://jquense.github.io/react-big-calendar/examples/index.html#prop-formats

View

大多数使用let formats = { dateFormat: 'dd',dayFormat: (date,culture,localizer) => localizer.format(date,'DDD',culture),dayRangeHeaderFormat: ({ start,end },localizer) => localizer.format(start,{ date: 'short' },culture) + ' — ' + localizer.format(end,culture) } <Calendar formats={formats} /> 方法签名，除非它们处理范围，并使用为实例配置的任何(date: Date,culture: ?string,localizer: Object) => string。因此，对您来说（似乎正在使用Moment），就像这样：

localizer