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

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source