React中使用FullCalendar无法获取Google Calendar事件求助

1. 修复JSX属性语法错误 #

你的代码中googleCalendarApiKey=API_KEY缺少引号，JSX中字符串属性必须用引号包裹，否则会被识别为变量，导致密钥无效：

<FullCalendar
  ref={calendarRef}
  plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin, googleCalendarPlugin]}
  googleCalendarApiKey="你的实际API密钥" // 补充引号
  initialView="dayGridMonth"
  weekends={true}
  dateClick={handleDateClick}
  headerToolbar={false}
  eventSources={[{ 
    googleCalendarId: '你的实际日历ID'      
  }]}
  height='70vh' 
/>

2. 验证Google API密钥配置 #

• 登录Google Cloud控制台，确认你的API密钥已启用Calendar API；
• 检查密钥的限制设置：如果设置了IP限制，确保本地开发IP（如localhost）在允许列表内；如果设置了HTTP referrer限制，添加http://localhost:xxxx（你的React开发端口）到允许列表。

3. 确认日历ID的正确性 #

公开日历的ID不一定是邮箱格式，进入Google日历的「设置和共享」→「集成日历」，复制官方给出的「日历ID」（通常是类似xxxxxx@group.calendar.google.com的长串字符），不要直接使用邮箱地址。

4. 直接测试Google Calendar API请求 #

用浏览器或Postman调用以下接口，验证是否能获取事件：

GET https://www.googleapis.com/calendar/v3/calendars/{你的日历ID}/events?key={你的API密钥}

如果接口返回403/401错误，说明API密钥或日历权限有问题；如果返回空数组，检查日历是否真的包含公开事件。

5. 检查事件的可见性设置 #

即使日历设为公开，单个事件的「可见性」需设置为「公开」（而非「私有」），否则该事件不会对外展示。

6. 排查版本兼容性 #

确保@fullcalendar/google-calendar插件的版本与@fullcalendar/core、其他插件（如dayGridPlugin）的版本完全一致，版本不兼容可能导致插件无法正常工作。

7. 查看浏览器控制台错误 #

打开开发者工具的Console面板，检查是否有网络请求错误（如403、404）或JS报错，这些信息能直接定位问题根源。

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