React-Big-Calendar日期时间分离问题求助及相关概念解惑

问题原因 #

你直接拼接start_date和start_time得到的是非法日期格式（比如2023-04-252000-01-01T19:00:00.000Z），moment无法正确解析该格式，导致日历组件无法识别事件时间，同时抛出格式警告。

修复代码 #

修改startAccessor和endAccessor，通过合理方式合并日期与时间：

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)

    // 合并日期与时间的工具函数
    const combineDateTime = (dateStr, timeStr) => {
        const date = moment(dateStr);
        const time = moment(timeStr);
        // 将时间的时分秒赋值到日期对象上
        date.set({
            hour: time.hour(),
            minute: time.minute(),
            second: time.second()
        });
        return date;
    }

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

};

export default EventCalendar;

也可以用字符串拼接的方式（需确保格式合法）：

startAccessor={(event) => {
    // 提取时间部分：从start_time中取出时分秒片段
    const timePart = event.start_time.split('T')[1].split('.')[0];
    return moment(`${event.start_date}T${timePart}`);
}}

核心概念解释 #

• localizer：React-Big-Calendar的本地化适配器，负责处理日期的解析、格式化、时区转换等核心逻辑。momentLocalizer是基于moment.js实现的适配器，让日历能兼容moment的日期处理能力，适配不同地区的日期显示规则。
• startAccessor：自定义提取事件开始时间的函数。日历默认会从事件对象中读取start字段，若你的事件结构不同（比如日期时间分离），就通过这个函数告诉日历如何获取合法的开始时间对象，返回值需是localizer能识别的日期类型（如moment对象、Date对象）。
• endAccessor：与startAccessor功能对应，用来自定义提取事件的结束时间，逻辑与startAccessor一致，返回结束时间的日期对象。

内容的提问来源于stack exchange，提问作者angiem103