How to populate modal on event click?

Question

Currently setting up FullCalendar using ReactJS. I can populate my calendar and the events but having trouble with the eventClick={}. How can I populate a modal using eventClick={} and retrieve event information?

I have managed to get the modal to appear when the event is clicked on but I cannot seem to pass any data through < this is the closest I got. I thought of perhaps greating a function where the modal fires off but I cant work out how to make it show.

Current Code

constructor() {
        super();
        this.state = {
            modal: false
        };

        this.toggle = this.toggle.bind(this);
    };

    toggle() {
        this.setState(prevState => ({
            modal: !prevState.modal
        }));
    }

----
  //I then render the calendar and modal inside the div.

<div id="calendar" class="container" ref="calendar">
                <FullCalendar
                    header={{
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth, listWeek'
                    }}
                    selectable={true}
                    height={650}
                    aspectRatio={2}
                    plugins={[interaction, dayListPlugin, dayGridPlugin, bootstrapPlugin]}
                    themeSystem="bootstrap"
                    weekends={false}
                    displayEventTime={true}
                    timeZone="UTC"
                    events={jsonFeed}
                    eventRender={this.handleEventRender}
                    eventClick={this.toggle}
                />
            <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
            <ModalHeader toggle={this.toggle}>testTitle</ModalHeader>
            <ModalBody>test body</ModalBody>
            <ModalFooter>
                <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
            </ModalFooter>
        </Modal>
            </div>

So here I get the modal appearing and disappearing when I click on the event/close button but I cannot pass the data from the event clicked through it. I hope that someone can help. I cant seem to get it to do it.

Answer 1

Your question states "So here I get the modal appearing and disappearing when I click on the event/close button..." but in the comments you state "but I just can't figure what to write to render it".

I am going to assume the Modal is being rendered and that the issue is you are unsure how to use the eventClick callback.

ADyson was spot on about the issue you are having. You have already set up the callback, FullCalendar considers your toggle function the function to call when it triggers the event click. When your toggle function is called it will be passed an eventClickInfo object that gives you access to the event, HTML element, jsEvent and the view.

So changing your toggle to this would give you access to the event:

toggle(eventClickInfo) {
  console.log(eventClickInfo);

  this.setState(prevState => ({
    modal: !prevState.modal
  }));
}

*I would change the name to handleEventClick or eventClick.

Update 1: Based on the comments above I have taken your code sandbox and updated. I changed the following:

1. Moved the modal into the render function so that it's rendered then updated from the state.
2. Added the event to the state object so when you click the event this is updated. This is then what is rendered in the dialog.

3. Changed class to className on the div with the id calendar since this is standard in React due to class being a keyword in JS.

   class Calendar extends React.Component {
     state = {
       modal: false,
       event: {
         title: "",
         start: new Date()
       }
     };
   
     toggle = () => {
       this.setState({ modal: !this.state.modal });
     };
   
     handleEventClick = ({ event, el }) => {
       this.toggle();
       this.setState({ event });
     };
   
     render() {
       return (
         <div id="calendar" className="container" ref="calendar">
           <FullCalendar
             header={{
               left: "prev,next today",
               center: "title",
               right: "dayGridMonth, listWeek"
             }}
             selectable={true}
             plugins={[interaction, dayListPlugin, dayGridPlugin, bootstrapPlugin]}
             themeSystem="bootstrap"
             weekends={false}
             displayEventTime={true}
             timeZone="UTC"
             events={[
               { title: "event 1", date: "2019-05-01" },
               { title: "event 2", date: "2019-05-02" }
             ]}
             eventRender={this.handleEventRender}
             eventClick={this.handleEventClick}
           />
           <Modal
             isOpen={this.state.modal}
             toggle={this.toggle}
             className={this.props.className}
           >
             <ModalHeader toggle={this.toggle}>
               {this.state.event.title}
             </ModalHeader>
             <ModalBody>
               <div>
                 <p>{this.state.event.start.toISOString()}</p>
               </div>
             </ModalBody>
             <ModalFooter>
               <Button color="primary">Do Something</Button>{" "}
               <Button color="secondary" onClick={this.toggle}>
                 Cancel
               </Button>
             </ModalFooter>
           </Modal>
         </div>
       );
     }
   }
   

Answer 2

on your button(styled-components),

<Button type="button" color="primary" onClick={e => toggle(e)}>Toggle Button</Button>

also on your handleToggle()

toggle = event => {
 // event.preventDefault() or manipulate something with the @param
 this.setState(prevState => ({ modal: !prevState.modal }))
}