在React大日历中创建事件

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

const localizer = momentLocalizer(moment);

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

  const handleCreateEvent = (event) => {
    // 获取用户输入的事件信息，例如从表单中获取
    const { title, start, end } = event;

    // 创建新的事件对象
    const newEvent = {
      title,
      start,
      end,
    };

    // 将新的事件添加到事件数组中
    setEvents([...events, newEvent]);
  };

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
      <form onSubmit={handleCreateEvent}>
        <input type="text" name="title" placeholder="事件标题" />
        <input type="datetime-local" name="start" />
        <input type="datetime-local" name="end" />
        <button type="submit">创建事件</button>
      </form>
    </div>
  );
};

export default CalendarComponent;