I'm creating a calendar of sales appointments using React Big Calendar. When a user clicks on a day, I would like to create a map populated with all of the appointment locations for that day. But to do that, I need a list of events specific to that day. I know that I could write a function that filters the list of events supplied to the calendar component, but I'd rather not do that if React Big Calendar comes with that functionality already.
Here is my code for the Calendar component:
<Calendar
localizer={localizer}
events={events}
startAccessor='start'
endAccessor='end'
style={{ height: 500 }}
onSelectSlot={(slotInfo) => {
console.log(slotInfo)
}}
selectable
popup={true}
eventPropGetter={(eventStyleGetter)}
/>
As you can see, I've tried using onSelectSlot prop, which console logs slotInfo. Here is the result in the console when I select a slot that has multiple events:
{
"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
}
}
I'm confused why there is only one slot in the slot array if there are multiple events? Is there a way to get all of the events of that day without writing a function to filter the events array?