ReactJS集成FullCalendar时事件无法显示问题求助

我是JavaScript和React新手，正在开发一个从API获取事件并展示的小型日历。API数据获取环节正常，但事件无法在页面显示，且控制台无任何报错。

我的页面代码如下：

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import React, { useState, useEffect } from "react";
import "./Home.css";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

function convertirFormatDate(dateString: string) {
  const dateTimeParts = dateString.split(" ");
  const dateWithoutTimeZone =
    dateTimeParts[0] + "T" + dateTimeParts[1].split("+")[0];
  return dateWithoutTimeZone;
}

interface Event {
  title: string;
  start: string;
  end: string;
}

interface EventData {
  summary: string;
  start: string;
  end: string;
  description?: string;
  prof?: string;
  location?: string;
  uid?: string;
}

const Home: React.FC = () => {
  const [events, setEvents] = useState<Event[]>([]);

  useEffect(() => {
    fetch("http://myapi/api/planning/getPlanningPerName/sample", {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        const events: Event[] = json.map((eventData: EventData) => ({
          title: eventData.summary,
          start: convertirFormatDate(eventData.start),
          end: convertirFormatDate(eventData.end),
        }));

        setEvents(events);
      });
  }, []);

  events.map((event: Event) => {
    console.log(event);
  });
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Mycalendar</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <div id="main-content">
          <FullCalendar
            plugins={[dayGridPlugin]}
            initialView="dayGridDay"
            locale="fr"
            titleFormat={{ month: "long", day: "numeric" }}
            events={events}
          />
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

处理后的events变量格式如下：

{
    "title": "my title.",
    "start": "2024-04-10T09:30:00",
    "end": "2024-04-10T11:00:00"
}

从以下几个方向排查并修复：

1. 匹配视图与事件日期 #

当前initialView设为dayGridDay（单日视图），如果事件日期不是日历默认显示的当天，就会看不到事件。先改成月视图测试：

<FullCalendar
  // ...其他属性
  initialView="dayGridMonth"
/>

2. 给FullCalendar设置明确高度 #

FullCalendar需要足够高度才能渲染，默认高度可能为0导致无法显示。添加高度属性：

<FullCalendar
  // ...其他属性
  height="600px"
/>

3. 优化日期转换逻辑 #

确认日期格式完全符合FullCalendar的ISO8601要求，可改用new Date()转换替代自定义函数：

start: new Date(eventData.start).toISOString(),
end: new Date(eventData.end).toISOString(),

4. 调整日志位置确认状态更新 #

将组件顶层的日志移到useEffect中，确保能看到状态更新后的事件：

useEffect(() => {
  console.log("已加载的事件:", events);
}, [events]);

5. 解决样式冲突 #

IonContent的fullscreen可能遮挡日历，给#main-content添加基础样式：

#main-content {
  padding: 1rem;
  min-height: 100vh;
}

内容的提问来源于stack exchange，提问作者TuroTV