CODEWITHSUNDEEP
reactjsreact-big-calendar
WildThing
WildThing

Reputation: 1275

react-big-calendar: How make a popup with onSelectEvent

<DragAndDropCalendar
        selectable
        localizer={localizer}
        events={events}
        style={{ height: 1550 }}
        onSelectSlot={(e) => handleSelect(e)}
        onSelectEvent={(e) => handleSelectedEvent(e)}
/>

here's the function:

    function handleSelectedEvent (e) {
    <div className="modal">
      {console.log(e)}
    </div>
  }

The issue:

The modal wont show up, it does show in console log but then I tried to put it in a modal, it just does not render. I have tried react-responsive-modal and also other bootstrap modals but it just does not render.

Upvotes: 1

Views: 4386

Answers (1)

Thess
Thess

Reputation: 93

import React, { useState} from 'react'

function Calendar() {
   const [selectedEvent, setSelectedEvent] = useState(undefined)
   const [modalState, setModalState] = useState(false)

   const handleSelectedEvent = (event) => {
      setSelectedEvent(event)
      setModalState(true)
   }

   const Modal = () => {
       return (
          <div className={`modal-${modalState == true ? 'show' : 'hide'}`}>
             // Here you define your modal, what you want it to contain. 
             // Event title for example will be accessible via 'selectedEvent.title'
          </div>
       )
   }

   return (
      <div>
         {selectedEvent && <Modal />}
         <Calendar
            selectable
            localizer={localizer}
            events={events}
            style={{ height: 1550 }}
            onSelectSlot={(e) => handleSelect(e)}
            onSelectEvent={(e) => handleSelectedEvent(e)}
         />
      </div>
   )
}

And then, in css, you have to do:

.modal-show {
  display: block;
}

.modal-hide {
  display: none;
}

Upvotes: 3

Related Questions