创建新事件时更新react-big-calendar组件

import React, { useState } from 'react';
import BigCalendar from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const MyCalendar = () => {
  const [events, setEvents] = useState([]);

  const handleCreateEvent = (newEvent) => {
    setEvents([...events, newEvent]);
  };

  return (
    <div>
      <button onClick={() => handleCreateEvent({ start: new Date(), end: new Date(new Date().getTime() + 60 * 60 * 1000), title: 'New Event' })}>
        Create New Event
      </button>
      <BigCalendar
        localizer={BigCalendar.momentLocalizer(moment)}
        events={events}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MyCalendar;

const events = [
  {
    start: new Date(),
    end: new Date(new Date().getTime() + 60 * 60 * 1000),
    title: 'Meeting'
  }
];

<BigCalendar
  localizer={BigCalendar.momentLocalizer(moment)}
  events={events}
  startAccessor="start"
  endAccessor="end"
  onEventResize={(event, resizeData) => {
    // 处理事件调整大小
  }}
  onEventDrop={(event, dropData) => {
    // 处理事件拖放
  }}
  style={{ height: 500 }}
/>