Reactjs BigCalendar Adding Event

Question

I am using BigCalendar and I am trying to add an event. Currently, in github they use window.prompt(); but I would like to use Modal. However, nothing is appearing and I am unsure why.

link: https://github.com/intljusticemission/react-big-calendar

render:

  return(
    <div style={{ height: 700 }}>
      <BigCalendar
        selectable={true}
        localizer={localizer}
        events={this.state.cal_events}
        step={30}
        defaultView='month'
        views={['month','week','day']}
        defaultDate={new Date()}
        scrollToTime={new Date(1970, 1, 1, 6)}
        onSelectEvent={event => alert(event.title)}
        onSelectSlot={this.handleSelect}
      />        
    </div>
  );

handleSelect (where user click on a date to add an event)

handleSelect = e => {
  //set model to true
this.openModal();
  return(
   <div> 
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      contentLabel="Example Modal"
    >

      <button onClick={this.closeModal}>close</button>
      <div>Add event</div>
      <form onSubmit={this.onFormSubmit}>
        <input />
        <DropdownButton title={this.state.dropDownSelection} key="1" id="test" onSelect={this.onchangeSelectDropdown} >
          <MenuItem eventKey="Option  1"> Option 1</MenuItem>
          <MenuItem eventKey="Option 2"> Option 2</MenuItem>
          <MenuItem eventKey="Option 3"> Option 3</MenuItem>

          <MenuItem divider />
          <MenuItem eventKey="Other">Other</MenuItem>
        </DropdownButton>

        <input type="submit" value="Submit" />
      </form>
    </Modal>
  </div> 
  );

}

The problem is that Model never renders and I am unsure why. If this way is not possible are there any alternatives?

Answer 1

The problem is that Model never renders and I am unsure why

It's because the returned Modal component was never attached to the DOM.

Try changing your implementation by conditionally rendering the Modal instead.

handleSelect = e => {
  //set model to true
  this.setState({
    modalIsOpen: true
  });
}

renderModal = () => {
  if (!this.state.modalIsOpen) return;
  return(
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      contentLabel="Example Modal"
    >

      <button onClick={this.closeModal}>close</button>
      <div>Add event</div>
      <form onSubmit={this.onFormSubmit}>
        <input />
        <DropdownButton title={this.state.dropDownSelection} key="1" id="test" onSelect={this.onchangeSelectDropdown} >
          <MenuItem eventKey="Option  1"> Option 1</MenuItem>
          <MenuItem eventKey="Option 2"> Option 2</MenuItem>
          <MenuItem eventKey="Option 3"> Option 3</MenuItem>

          <MenuItem divider />
          <MenuItem eventKey="Other">Other</MenuItem>
        </DropdownButton>

        <input type="submit" value="Submit" />
      </form>
    </Modal>
  );
}

render() {
  return (
    <div style={{ height: 700 }}>
      <BigCalendar
        selectable={true}
        localizer={localizer}
        events={this.state.cal_events}
        step={30}
        defaultView="month"
        views={["month", "week", "day"]}
        defaultDate={new Date()}
        scrollToTime={new Date(1970, 1, 1, 6)}
        onSelectEvent={event => alert(event.title)}
        onSelectSlot={this.handleSelect}
      />
      <button onClick={this.openModal}>Open Modal</button>
      {this.renderModal()}
    </div>
  );
}

See minimal working example here: https://codesandbox.io/s/50j9zx7knn