How to use startAccessor to specify a date in React-Big-Calendar

Question

I have an array of events being sent to react-big-calendar

They have the following format:

{ "_id": "9Hfiz8C3tztP5LauA",
  "name": "This is a test event",
  "description": "Testing 123",
  "calendar": "LwnaRAuJ6n9xmxhGj",
  "clientData": [
    {
      "clientId": "dSE84s8qQDHNzAFDt",
      "date": "2017-02-23T12:00:00.000Z"
    }
  ]
}

I want react-big-calendar to use the event.clientData.date as the date it displays for each event.

Currently the calendar is being rendered empty.

From reading the documentation it seems I need to use the startAccessor prop to achieve this. I've tried the following:

<BigCalendar
    selectable
    events={events}
    startAccessor={this.getEventDate}
/>


getEventDate() {
    return moment(this.props.events.clientData.date);
}

That isn't working (I didn't think it would). If anyone could help it would be much appreciated!

Answer 1

I managed to work it out

Here is what worked for me:

<BigCalendar
    events={this.props.events}
    startAccessor={(event) => { return moment(event.clientData[0].date) }}
    endAccessor={(event) => { return moment(event.clientData[0].date) }}
/>