React Big Calendar - 是否可以点击一天并检索当天的事件列表？

Question

我正在使用 React Big Calendar 创建销售约会日历。当用户点击某一天时，我想创建一个地图，其中填充了当天的所有约会地点。但要做到这一点，我需要一份特定于那一天的事件列表。我知道我可以编写一个函数来过滤提供给日历组件的事件列表，但如果 React Big Calendar 已经具有该功能，我宁愿不这样做。

这是我的日历组件代码：

<Calendar
    localizer={localizer}
    events={events}
    startAccessor='start'
    endAccessor='end'
    style={{ height: 500 }}
    onSelectSlot={(slotInfo) => {
        console.log(slotInfo)
    }}
    selectable
    popup={true}
    eventPropGetter={(eventStyleGetter)}
/>

如您所见，我尝试使用 onSelectSlot prop，控制台记录 slotInfo。这是当我 select 一个有多个事件的插槽时控制台中的结果：

{
    "slots": [
        "2022-02-16T08:00:00.000Z"
    ],
    "start": "2022-02-16T08:00:00.000Z",
    "end": "2022-02-17T08:00:00.000Z",
    "action": "click",
    "box": {
        "x": 769,
        "y": 491,
        "clientX": 769,
        "clientY": 491
    }
}

我很困惑为什么有多个事件时槽数组中只有一个槽？有没有办法不用写过滤事件数组的函数就可以得到当天所有的事件？

Answer 1

添加selectable道具means that用户可以使用鼠标点击和拖动select一定范围的次数。 slots 数组不会为您提供当天或 selected 范围内的所有事件 - 相反，它只会为您提供 selected 范围。

如果您单击一天，slots 数组中的（唯一）值将是对应于一天开始的日期。您可以使用 start 和 end 属性来查看一天的开始时间和结束时间（不包括）。

如果单击并拖动，slots 数组将包含所有拖过的时间段，其中时间段的持续时间由 steps 属性决定。

如果您想在点击某天时获取特定日期的所有元素列表，您可以在 onSelectSlot 回调中过滤掉不匹配的事件，或者向下传递包含对包含当天所有事件的数组的引用的事件对象。它确实需要您编写少量代码，但这没什么好害怕的。

const { start, end } = slotInfo;
const eventsForThisDay = events.filter(
  event => event.start >= start && event.start < end
);

React Big Calendar - 是否可以点击一天并检索当天的事件列表？

React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

javascript

reactjs

react-big-calendar