react-big-calendar - React BigCalendar 日期转换

Question

我正在使用反应大日历。事件数据具有纪元格式的日期开始/结束。它不能正确渲染。如何设置访问器属性以使用此 JSON 格式？

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

我当前的日历组件声明

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

Answer 1

您可以使用地图功能以正确的格式获取事件

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

Answer 2

纪元时间只是一个数字，反应大日历接受 javascript 数据对象。因此，您需要使用以下方法将其转换为 javascript 日期对象。您可以映射函数并使用该对象来渲染它，您需要乘以 1000 才能获得时间格式。欲了解更多信息，请访问https://www.epochconverter.com/programming/#javascript

// availableSlots 是你的对象。

      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;
    });

希望这有效:)