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

【问题标题】：React-big-calendar. Date and time are separate values. How can i get this event calendar to work?反应大日历。日期和时间是单独的值。我怎样才能让这个活动日历工作？
【发布时间】：2023-02-02 22:13:37
【问题描述】：

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

事件日历组件

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;

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

事件对象

{
"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？

【问题讨论】：

标签： reactjs components momentjs accessor react-big-calendar

【解决方案1】：

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

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);
}

【讨论】：