React+react-big-calendar带时间坐标的日程事件不显示问题求助

问题根因 #

• 日期转换逻辑错误：你在handleOk方法中将RangePicker返回的moment对象格式化为带逗号的YYYY, M, D, h,MM,ss字符串，再通过new Date()解析该字符串时，JS Date无法正确识别这种带逗号的非标准格式，会生成无效的日期对象，导致日历无法识别事件的时间范围，因此不渲染事件。同时你格式化时误用了MM代表分钟，moment中MM是月份占位符，分钟的正确占位符是mm，格式规则错误也会导致日期解析失败。
• 变量引用错误：你在构造realEvents时写了title: titles、location: locations，实际定义的状态变量是title、location，多写的后缀s会导致变量未定义，事件数据异常。
• 多余的格式转换：AntD RangePicker的onChange返回的参数本身就是moment对象，不需要先转成字符串再转Date，直接调用toDate()方法就能拿到合法的JS Date对象。
• 硬编码事件可以正常渲染，是因为你直接给new Date()传入了数值参数，生成的是合法有效的Date对象，日历可以正常识别。

修复方案 #

1. 修正日期赋值逻辑 #

删掉多余的字符串格式化步骤，直接将moment对象转为Date存储：

const handleOk = (event) => {
    event.preventDefault();
    setStartDate(pickerDate[0].toDate())
    setEndDate(pickerDate[1].toDate())
    console.log("Title = ", title, ',Location = ', location, ',Description = ', description, "Daterange =", pickerDate[0].toDate())
    setVisible(false);
};

2. 修正realEvents的变量引用和日期转换 #

// 增加空值判断，避免startDate/endDate未赋值时生成无效事件
const realEvents = (startDate && endDate) ? [{
    id: 0,
    title: title,
    location: location,
    start: startDate,
    end: endDate,
    description: description,
}] : []

3. 可选优化：支持多事件存储 #

如果需要添加多个事件，建议将事件列表直接存为状态，避免每次渲染重新构造事件数组：

// 替换原来的startDate、endDate状态为事件数组状态
const [eventList, setEventList] = useState([])

const handleOk = (event) => {
    event.preventDefault();
    const newEvent = {
        id: Date.now(), // 用时间戳作为唯一ID
        title: title,
        location: location,
        start: pickerDate[0].toDate(),
        end: pickerDate[1].toDate(),
        description: description
    }
    setEventList(prev => [...prev, newEvent])
    // 清空表单
    setTitle('')
    setLocation('')
    setDescription('')
    setPickerDate(null)
    setVisible(false);
};

// 日历组件绑定eventList即可
<Calendar
    localizer={localizer}
    events={eventList}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
/>

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