反应大日历。 日期和时间是单独的值。 我怎样才能让这个活动日历工作？

Question

所以这是我第一次尝试向我的应用程序添加日历，但时间和日期未显示在日历上。 这是我到目前为止所拥有的：

事件日历组件

import React, { useContext } from "react";
import { InfoContext } from "../App";
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import "react-big-calendar/lib/css/react-big-calendar.css";

function EventCalendar() {

    const localizer = momentLocalizer(moment)
    const {events} = useContext(InfoContext)

    console.log(events)

    return (
        <div>
        <Calendar
            localizer={localizer}
            events={events}
            startAccessor={(event) => { return moment(event.start_date + event.start_time) }}
            endAccessor={(event) => { return moment(event.end_date + event.end_time) }}
            style={{ height: 500, marginLeft: "25%"}}
        />
        </div>
    );

};

export default EventCalendar;

我遵循的每个示例都使用带有“开始”和“结束”键的事件 object，其值是日期和时间。 在我的对象中，我将日期和时间分开。

事件对象

{
"id": 1,
"user_id": 1,
"client_id": 1,
"name": "Jackie's 30th Birthday",
"description": "All black 30th Birthday Party. Event theme is Funeral for her 20s",
"start_date": "2023-04-25",
"end_date": "2023-04-25",
"location": "1945 Swaniawski Stream, Morarfurt, MA 61494-5215",
"budget": 5000.0,
"start_time": "2000-01-01T19:00:00.000Z",
"end_time": "2000-01-01T23:00:00.000Z",
"total": 2000.0,
}

这是控制台上的消息

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

有人可以告诉我如何让它工作吗？ 能否请您向我解释一下什么是本地化程序、startAccessors 和 endAccessors？

Answer 1

您将不得不编写某种辅助方法来将您的“日期”和时间“合并到一个真正的 JS 日期中（因为大日历无论如何都需要真正的 JS 日期对象，而不是日期字符串）。 就像是：

function mergeStringDateTime(date = '', time = '') {
  if (!date) return time ? moment(time).toDate() : undefined;
  const [, trueTime] = time.split('T');
  return moment(`${date}T${trueTime}`).toDate();
}

const normalizeEvent = ({start_date, end_date, start_time, end_time, ...rest}) => ({
  ..rest,
  start: mergeStringDateTime(start_date, start_time),
  end: mergeStringDateTime(end_date, end_time)
});

function normalizeAllEvents(events = []) {
  return events.map(normalizeEvent);
}