如何使用react在fullcalendar中添加事件？

Question

我試圖制作一個動態添加事件的日歷，當我將一個事件添加到狀態數組時，它不會更新日歷，即它不會顯示在日歷上。 我的代碼如下：

import React, { useState } from 'react';
import Page from '../../Components/Page/Page';
import FullCalendar from '@fullcalendar/react';
import DayGridPlugin from '@fullcalendar/daygrid';
import Modal from 'react-modal';
import Button from '../../Components/Button/Button';
import AddEventModal from './AddEventModal';

export default function () {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const [events, setEvents] = useState([]);

  const onEventAdded = (event) => {
    setEvents([...events, event]);
  };

  return (
    <Page>
      <Button
        className="bg-blue-500 text-white"
        onClick={() => setAddModalOpen(true)}
      >
        New Event
      </Button>
      <div className="relative z-0">
        <FullCalendar
          plugins={[DayGridPlugin]}
          events={events}
          initialView="dayGridMonth"
        />
      </div>

      <AddEventModal
        isOpen={addModalOpen}
        onClose={() => setAddModalOpen(false)}
        onEventAdded={(event) => onEventAdded(event)}
      />
    </Page>
  );
}

Answer 1

我需要掌握日歷 API。

  const onEventAdded = (event) => {
    const api = calendarRef.current.getApi();
    api.addEvent(event);
  };