react-big-calendar对接MongoDB的日期存储格式与渲染问题

核心结论 #

MongoDB中日期字段统一存储BSON Date类型即可，不要存储自定义格式的字符串，这是兼顾存储性能、查询能力和前端适配的最优方案。
你之前遇到Invalid Date报错的原因是：写入的"2021, 8, 29, 9, 0, 0"属于自定义字符串格式，不符合JS Date对象的解析规则，所以转换失败。

1. MongoDB存储规则 #

• 写入数据时，无论是后端接口自动处理还是手动通过工具写入，都将日期转为标准ISODate格式存储，示例：ISODate("2021-09-29T09:00:00.000Z")
• Postman手动写入测试数据时，直接传ISO格式的时间字符串即可，不要使用逗号分隔的自定义格式

补充：MongoDB的BSON Date本质是用64位整数存储的时间戳，自带时区信息，查询返回给前端时会自动序列化为ISO标准时间字符串，这种格式可以被JS的Date对象直接解析，不需要额外做格式拆分。

2. 完整代码示例 #

后端写入示例（Node.js + Mongoose 为例） #

// 事件集合的Mongoose Schema定义
const eventSchema = new mongoose.Schema({
  title: String,
  start: Date, // 直接指定Date类型，Mongoose会自动转为MongoDB的BSON Date存储
  end: Date
})
const Event = mongoose.model('Event', eventSchema)

// 新增事件接口示例
app.post('/events', async (req, res) => {
  const { title, start, end } = req.body
  // 前端传ISO时间字符串或者时间戳都可直接写入，不需要额外转换
  const newEvent = await Event.create({ title, start, end })
  res.json(newEvent)
})

Postman手动测试写入格式 #

请求Body选JSON类型，直接传ISO格式的日期即可：

{
  "title": "测试会议",
  "start": "2021-09-29T09:00:00.000Z",
  "end": "2021-09-29T10:00:00.000Z"
}

前端React侧适配示例 #

import { useState, useEffect } from 'react'
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import axios from 'axios'

const localizer = momentLocalizer(moment)

function MyCalendar() {
  const [events, setEvents] = useState([])

  useEffect(() => {
    const fetchEvents = async () => {
      const res = await axios.get('/events')
      // 仅需要一步转换，ISO字符串可直接被new Date正确解析
      const formattedEvents = res.data.map(item => ({
        ...item,
        start: new Date(item.start),
        end: new Date(item.end)
      }))
      setEvents(formattedEvents)
    }
    fetchEvents()
  }, [])

  return (
    <div style={{ height: '800px' }}>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
      />
    </div>
  )
}

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