Jquery - How to open a modal (bootstrap 5) with react when clicking a cell in full Calendar

MarielAlejandra
July 16, 2023
128 views
0 votes
2 Answers

I’m trying to open a modal window using bootstrap 5 (not the library React-Bootstrap) when cliking a Day in the FullCalendar Component in React.

I tried accesing through the modal using $ of JQuery but I get this error message "$ is not a function". I try importing the JQuery library before the bootstrap one, adding the "import $ from Jquery" line and nothing works.
I also have this implementation but it doesn’t work so I don’t know what I’m missing.

const CalendarContainerPage = () => {const modalRef = useRef(null);

   const [showModal, setShowModal] = useState(false);

   const select = (info) => {
      alert('selected ' + info.start + ' to ' + info.end);
   }

   console.log(showModal)
    const handleDayClick = () => {
      setShowModal(true);
      
    };
  
    const handleCloseModal = () => {
      setShowModal(false);
    };

    useEffect(() => {
      if(showModal){
        modalRef..toggle()
      }

    },[showModal])

   
  const randomColor= "#"+((1<<24)*Math.random()|0).toString(16) + "";

 
  const eventObject = [
              { // this object will be "parsed" into an Event Object
                groupId: 'blueEvents',
                title: 'Congress', // a property!
                start: '2023-06-21',
                end:'2023-06-22',
                startRecur: '2023-06-18T09:00:00',
                endRecur: '2023-06-29T18:00:00',
                startTime: '12:30:00', // a property!
                endTime: '13:30:00', // a property! ** see important note below about 'end' **
                daysOfWeek: [ '1','2' ],
                display: 'block',
                color : randomColor,
              }
            ]

    console.log(eventObject);

   const eventClick = (info) => {
      alert('Event: ' + info.event.title)
   }
 return(
    <div className='calendarBoard'>
     <FullCalendar
        plugins={[ dayGridPlugin, interactionPlugin ]}
       locale = {esLocale}
        initialView="dayGridMonth"
        height='100%'
        selectable={true}
      select = { handleDayClick}
      events = {eventObject}
      eventClick={eventClick}
      handleWindowResize={true}
      />


    {showModal && (<div className="modal " ref={modalRef} id="ModalDay" tabindex="-1" aria-labelledby="ModalDay" aria-hidden="true" >
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel"> "text"</h5>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body px-4">
              Modal
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={handleCloseModal}>Cerrar</button>
              <button type="button" className="btn btn-primary">Guardar Cambios</button>
            </div>
          </div>
        </div>
      </div>)}
    
 </div>
 )
}

export default CalendarContainerPage

I also tried using useRef but I’m not sure if I’m using it correctly. (I’m new with React)

Answers

Chosen as BEST ANSWER

Just in case someone else has the same issue, I post here the solution I found:

import './calendarContainerPage.css'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import interactionPlugin from '@fullcalendar/interaction'; // for selectable
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import esLocale from '@fullcalendar/core/locales/es';
import { useEffect, useState, useRef } from 'react';
import bootstrap from 'bootstrap/dist/js/bootstrap.min.js';



const CalendarContainerPage = () => {
  const [myModal, setMyModal] = useState(null);
  const [selectedInfoDay, setSelectedInfoDay] = useState({start:"", end: ""});

    const handleDayClick = (info) => {
   setSelectedInfoDay(info)
       myModal.show()

    };
  
    
  const randomColor= "#"+((1<<24)*Math.random()|0).toString(16) + "";

 
  const eventObject = [
              { // this object will be "parsed" into an Event Object
                groupId: 'blueEvents',
                title: 'Congress', // a property!
                start: '2023-06-21',
                end:'2023-06-22',
                startRecur: '2023-06-18T09:00:00',
                endRecur: '2023-06-29T18:00:00',
                startTime: '12:30:00', // a property!
                endTime: '13:30:00', // a property! ** see important note below about 'end' **
                daysOfWeek: [ '1','2' ],
                display: 'block',
                color : randomColor,
              }
            ]

    console.log(eventObject);

   const eventClick = (info) => {
      alert('Event: ' + info.event.title)
   }

   useEffect(() => {
    setMyModal(new bootstrap.Modal(document.getElementById('dayModal'), {
      keyboard: false
    }))
  }, []);
 return(
 
    <div className='calendarBoard'>
     <FullCalendar
        plugins={[ dayGridPlugin, interactionPlugin ]}
       locale = {esLocale}
        initialView="dayGridMonth"
        height='100%'
        selectable={true}
      select = { handleDayClick}
      events = {eventObject}
      eventClick={eventClick}
      handleWindowResize={true}
      />



{/* <!-- Modal --> */}
<div className="modal fade" id="dayModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
       {'selected ' + selectedInfoDay.start + ' to ' + selectedInfoDay.end}
      </div>
      <div className="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>
 )
}

export default CalendarContainerPage

Basically I pick the Modal window using the boostrap.Modal function inside a useEffect to be sure to work with the modal after it is completly loaded:

 useEffect(() => {
    setMyModal(new bootstrap.Modal(document.getElementById('dayModal'), {
      keyboard: false
    }))
  }, []);

And call the click Handler of the day:

const handleDayClick = (info) => {
   setSelectedInfoDay(info)
       myModal.show()

    };

I found this solution using the bootstrap 5 documentation: [https://getbootstrap.com/docs/5.0/components/modal/#methods]

(Edit)

Have you imported the necessary dependencies ?
Let’s check the following requirements:

Install Bootstrap and its dependencies:

npm install bootstrap@^5.0.0
npm install react-bootstrap bootstrap fullcalendar

Import the necessary components and dependencies in your file:

import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import bootstrapPlugin from '@fullcalendar/bootstrap';
import { Modal, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/bootstrap/main.css';

Import the Bootstrap CSS in your project’s main file (index.js or App.js):

import 'bootstrap/dist/css/bootstrap.min.css';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/bootstrap/main.css';

Modified code:

const CalendarContainerPage = () => {
  const [showModal, setShowModal] = useState(false);

  const handleDayClick = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div className="calendarBoard">
      <FullCalendar
        plugins={[dayGridPlugin, bootstrapPlugin]}
        initialView="dayGridMonth"
        height="100%"
        selectable={true}
        select={handleDayClick}
      />

      <Modal show={showModal} onHide={handleCloseModal} aria-labelledby="modal-title">
        <Modal.Header closeButton>
          <Modal.Title id="modal-title">Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal Body</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            Close
          </Button>
          <Button variant="primary">Save Changes</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default CalendarContainerPage;

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to open a modal (bootstrap 5) with react when clicking a cell in full Calendar

Answers