反应 BigCalendar 日期转换

Question

我正在使用 react-big-calendar。事件数据具有纪元格式的日期 start/end。它无法正确呈现。如何设置访问器属性以使用此 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 数据对象。因此，您需要使用 following.You 可以映射函数将其转换为 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;
    });

希望这有效:)

反应 BigCalendar 日期转换

React BigCalendar date conversion

react-big-calendar