React BigCalendar 日期转换答案

【问题标题】：React BigCalendar date conversionReact BigCalendar 日期转换
【发布时间】：2018-04-16 17:23:10
【问题描述】：

我正在使用 react-big-calendar。事件数据具有纪元格式的日期开始/结束。它不能正确渲染。如何设置访问器属性以使用这种 JSON 格式？

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

我当前的日历组件声明

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

【问题讨论】：

标签： react-big-calendar

【解决方案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()}
/>

【讨论】：

【解决方案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;
    });

希望这可行:)

【讨论】：