How to get selected event in React Big Calendar?

Question

<BigCalendar
    events={dummyEvents}
    onSelectEvent={event => alert(event)}
    eventPropGetter={eventStyleGetter}
/>

After displaying events on BigCalendar, I want to know which event is selected. But this snippet just only displays an empty string?

How to get selected event in React Big Calendar?

Answer 1

You're trying to alert() an object. The onSelectEvent method gets the full event you clicked on {start, end, allDay, ...rest}, where start and end should both be true JS Date objects. And, since you included onSelectEvent you must now control selected on your calendar.

const [selected, setSelected] = useState();

const handleSelected = (event) => {
  setSelected(event);
  console.info('[handleSelected - event]', event);
};
<Calendar
  selected={selected}
  onSelectEvent={handleSelected}
  {...otherProps}
/>

Important Note: selected must be a reference to an object in your events array. The event, sent to onSelectEvent is a reference, not a copy. If you change your state value later, without updating your events array, then RBC won't show those changes.