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?
Adding the selectable prop means that users can use the mouse to click and drag in order to select a range of times. The slots array will not give you all the events for the day, or for the selected range - rather, it'll give you just the selected range.
If you click on a day, the (only) value in the slots array will be the Date corresponding to the start of the day. You can use the start and end properties to see when the day starts and when it ends (exclusive).
If you click and drag, the slots array will contain all timeslots dragged over, where the duration of a timeslot is determined by the steps prop.
If you want to get a list of all elements for a particular day when the day is clicked, you can either filter out the events that don't match inside the onSelectSlot callback, or to pass down event objects that contain a reference to an array containing all events for that day. It does require a tiny bit of code on your part, but that's nothing to be afraid of.
const { start, end } = slotInfo;
const eventsForThisDay = events.filter(
event => event.start >= start && event.start < end
);