React-big-calendar: Surfacing events from agenda view

[hlindley-ccssi]

Hi,

I'd like to know if it is possible for the component that instantiates the calendar to receive events from a button in a custom agenda view? I have an agenda view with an "add to my schedule" button and I would like to be able to determine that an agenda item has been clicked on in order to manage state in the parent component.

I can't seem to pass props or callback functions to the agenda view and it appears that onSelectSlot and onSelectEvent only apply to calendar cells and not agenda items.

Thanks in advance for any help or pointers to example code.

[jquense]

see this comment: https://github.com/intljusticemission/react-big-calendar/issues/261#issuecomment-273487073

[jordanrolph]

In case it's useful, I ran into a similar problem. I wanted my sidebar to show the event detail when an agenda item was clicked. Here's the relevant snippets:

* Parent.js (where state is managed) *
_custom function_

onSelectAgendaEvent = (event) => {
    // do something
    // e.g. this.setState({ selectedEvent: event });
  }

...
_pass the function to the custom component as props_

function MyAgendaComponentWithProps() {
    return <MyAgendaComponent
         ...
         onSelectAgendaEvent={() => onSelectAgendaEvent(event)}
     />
}

...

<BigCalendar
        events={events}
        onSelectEvent={onSelectEvent}
        ... 
        components = { agenda: { event: MyAgendaComponentWithProps } }
        onSelectAgendaEvent={onSelectAgendaEvent}
      />

* MyAgendaComponent.js *

const MyAgendaComponent = ({
  event,
  ...
  onSelectAgendaEvent,
}) => (
  <div >
    <h1 >{event.title} </h1>
      <button onClick={onSelectAgendaEvent}>Click Me</button>
  </div>
);