FullCalendar React中的React Bootstrap弹出窗口

import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import { Button, Modal, Form } from 'react-bootstrap';

const CalendarApp = () => {
  const [showModal, setShowModal] = useState(false);
  const [eventTitle, setEventTitle] = useState('');

  const handleShowModal = () => setShowModal(true);
  const handleCloseModal = () => setShowModal(false);

  const handleEventAdd = () => {
    // 这里可以添加事件到日历
    console.log('Event added:', eventTitle);
    handleCloseModal();
  };

  return (
    <>
      <FullCalendar
        plugins={[dayGridPlugin]}
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }}
        events={[
          // 示例事件数据
          { title: 'Event 1', start: new Date() },
          { title: 'Event 2', start: new Date() }
        ]}
        eventClick={() => handleShowModal()}
      />

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>Add New Event</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="eventTitle">
              <Form.Label>Event Title</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter event title"
                value={eventTitle}
                onChange={(e) => setEventTitle(e.target.value)}
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            Close
          </Button>
          <Button variant="primary" onClick={handleEventAdd}>
            Add Event
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default CalendarApp;

import { useEffect } from 'react';

// 在组件中使用useEffect监听事件数据变化
useEffect(() => {
  // 更新日历逻辑
}, [events]);