尝试访问映射的api数据并将其显示在React-big-calendar (ReactJS)中

import React, { useEffect, 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 MyCalendar = () => {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/events') // 替换为您的API地址
      .then(response => response.json())
      .then(data => {
        // 将API数据转换为React-big-calendar所需的事件格式
        const formattedEvents = data.map(event => ({
          title: event.title,
          start: new Date(event.start),
          end: new Date(event.end),
        }));
        setEvents(formattedEvents);
      })
      .catch(error => {
        console.error('Error fetching API data:', error);
      });
  }, []);

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MyCalendar;