React中如何将自定义FullCalendar与Google Calendar API对接？

• 先安装官方对接依赖
  在项目根目录执行命令：
  npm install @fullcalendar/google-calendar
  或者用yarn：
  yarn add @fullcalendar/google-calendar

• 在你的自定义FullCalendar组件文件中导入插件
  除了你原本导入的React FullCalendar核心和视图插件，加上Google Calendar插件：

  import FullCalendar from '@fullcalendar/react';
  import dayGridPlugin from '@fullcalendar/daygrid';
  // 新增导入Google Calendar插件
  import googleCalendarPlugin from '@fullcalendar/google-calendar';
  

• 配置你的API密钥和日历ID
  在组件内部定义常量（生产环境建议用环境变量存储，避免硬编码）：

  const GOOGLE_API_KEY = '你的Google API密钥';
  const CALENDAR_ID = '你的目标日历ID';
  

• 把Google Calendar配置整合到现有组件中
  在FullCalendar的props里，把googleCalendarPlugin加入plugins数组，同时新增googleCalendar配置项，保留你原本的自定义配置（比如headerToolbar、事件回调等）：

  function CustomFullCalendar() {
    return (
      <FullCalendar
        // 保留原有插件，新增googleCalendarPlugin
        plugins={[dayGridPlugin, googleCalendarPlugin]}
        initialView="dayGridMonth"
        // 新增Google Calendar配置
        googleCalendar={{
          apiKey: GOOGLE_API_KEY,
          calendars: [{ id: CALENDAR_ID }]
        }}
        // 以下是你原本的自定义配置，按需保留
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }}
        // 你的其他自定义逻辑，比如eventClick、eventRender等
        eventClick={(info) => {
          console.log(info.event);
        }}
      />
    );
  }
  
  export default CustomFullCalendar;
  

• 排查常见问题

  • 确认Google Cloud控制台中，你的API密钥已经启用了Google Calendar API
  • 私有日历仅用API密钥无法访问，需要改用OAuth2授权；公开日历可直接用API密钥访问
  • 检查API密钥的访问限制，本地开发时要把http://localhost:3000（或你的开发端口）加入允许的来源
  • 打开浏览器控制台查看网络请求，若出现403/404错误，根据提示调整API密钥权限或日历ID

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