React BigCalendar date conversion

Question

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()}
/>

score 4 · Accepted Answer · answered Jun 13 '18 at 22:37

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()}
/>

score 1 · Answer 2 · answered Sep 05 '18 at 03:52

Epoch time is just a number and react big calendar accepts javascript data object. So you need to convert it into javascript date object using following.You can map function and use the object to render it and you need to multiply with 1000 to get time format. for more visit https://www.epochconverter.com/programming/#javascript

// availableSlots is your object.

      var freeSlots = availableSlots.map(obj => {

        var slotObj = {};
        delete   obj.duration;

        slotObj['start'] = new Date(obj.start * 1000);
        slotObj['end'] = new Date(obj.end * 1000);
        slotObj['title'] = "Book"; // extra field
        return slotObj;
    });

Hope this works :)

React BigCalendar date conversion

2 Answers2