React BigCalendar：时间戳事件无法渲染，如何配置访问器属性？

Hey there! I’ve dealt with this exact scenario before when working with react-big-calendar, so let’s get your events rendering correctly.

The core issue here is two-fold:

• react-big-calendar expects event objects to have start and end properties by default, but your data uses startDate and endDate instead.
• Your dates are stored as epoch timestamps, while the component needs actual Date objects to render events properly.

You have two straightforward solutions to fix this:

Option 1: Preprocess Your Event Data #

First, you can transform your actionItems array to match the component’s expected format before passing it to the calendar. This is great if you need to reuse the formatted data elsewhere in your app.

// Convert timestamps to Date objects and rename fields
const formattedEvents = actionItems.map(item => ({
  ...item, // Keep all existing properties
  start: new Date(item.startDate),
  end: new Date(item.endDate)
}));

Then update your component to use the formatted data:

<BigCalendar
  events={formattedEvents}
  views={allViews}
  showMultiDayTimes
  defaultDate={new Date()}
/>

Option 2: Use the Component’s Accessor Props #

react-big-calendar provides built-in props to customize how it reads event data: startAccessor and endAccessor. These can accept a function that returns the correct Date object directly from your timestamp fields.

This keeps your original data intact and handles the conversion directly in the component:

<BigCalendar
  events={actionItems}
  views={allViews}
  showMultiDayTimes
  defaultDate={new Date()}
  // Tell the component how to get the start date
  startAccessor={(event) => new Date(event.startDate)}
  // Tell the component how to get the end date
  endAccessor={(event) => new Date(event.endDate)}
/>

Either approach will get your events showing up correctly on the calendar. I personally prefer the accessor props for quick fixes where I don’t need to modify the original data set.

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