是否导入了必要的依赖项？让我们检查以下要求：
安装Bootstrap及其依赖项：

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

字符串
在文件中导入必要的组件和依赖项：

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';

型
在项目的主文件（index.js或App.js）中导入Bootstrap CSS：

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

型
修改代码：

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;

型

为了防止其他人遇到同样的问题，我在这里发布了我找到的解决方案：

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

字符串
基本上，我使用useEffect中的bootstrap.Modal函数来选择Modal窗口，以确保在完成加载后可以使用modal：

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

型
并调用当天的点击处理程序：

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

    };

型
我使用bootstrap 5文档找到了这个解决方案：[https：//getbootstrap.com/docs/5.0/components/modal/#methods]