Search code examples
react-big-calendar

React BigCalendar date conversion

I am using react-big-calendar. The events data has date start/end in epoch format. It doesn't render correctly. How can set the accessor properties to work with this JSON format?

actionItems = 
    [
        {
        "id": 3312,
        "name": "Event Name",
        "startDate": 1518415200000,
        "endDate": 1519797600000,
        "duration": "4 weeks",
        },
]

my current calendar component declaration

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

  • You can use map function to get events in proper format

    const mapToRBCFormat = e => Object.assign({}, e, {
    start: new Date(e.startDate),
    end: new Date(e.endDate))
})

<BigCalendar
    events={actionItems.map(mapToRBCFormat)}
    views={allViews}
    showMultiDayTimes
    defaultDate={new Date()}
/>