React.js集成FullCalendar时无法加载Google Calendar日程数据求助

使用React.js重构兄弟会网站时，将旧站FullCalendar对接Google Calendar展示日程的逻辑迁移到React版本后，日历组件无法通过API拉取填充日程数据（代码中API密钥已做脱敏处理）。

问题代码 #

import React, { Component } from 'react'
import FullCalendar, { formatDate } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import nlLocale from '@fullcalendar/core/locales/nl'
import googleCalendarPlugin from '@fullcalendar/google-calendar'

export default class fullCal extends Component {
    render() {
        return (
        <FullCalendar
            locale={nlLocale}
            plugins={[dayGridPlugin, listPlugin, googleCalendarPlugin]}

            googleCalendarApiKey='mykey-SKL7JHxMn3Iblibblob22ijHXNGlI'

            events={[
                {
                    googleCalendarId: '86f3iqrt1q4vmua5pb0fb4q358@group.calendar.google.com',
                    className: 'gcal-event'
                }
            ]}


            headerToolbar={{
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,listWeek'
            }}
            initialView='dayGridMonth'
            editable={false}
            selectable={false}
            displayEventTime={true}
            eventTimeFormat={{
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false,
                hour12: false
            }}
            nextDayThreshold = '23:59:00'
            
            eventColor='#971849'
            eventTextColor='#ddd'

            firstDay={1}        
        />
        )       
    }    
}

属性传错了。React版FullCalendar的events属性只接收静态本地事件数组，Google Calendar的源配置不能放在events里传。单个公开Google日历直接给组件传googleCalendarId属性即可，多个日历源需要放在eventSources数组里配置。

1. 移除原有错误的events配置
2. 单个日历场景直接添加googleCalendarId属性传入日历ID；如果需要配置多个Google日历、或者给日历事件加自定义类名，把配置写到eventSources数组中

修复后的核心配置代码：

<FullCalendar
    locale={nlLocale}
    plugins={[dayGridPlugin, listPlugin, googleCalendarPlugin]}
    googleCalendarApiKey='mykey-SKL7JHxMn3Iblibblob22ijHXNGlI'
    // 单日历直接传ID
    googleCalendarId='86f3iqrt1q4vmua5pb0fb4q358@group.calendar.google.com'
    // 需要自定义类名/多日历时改用eventSources
    // eventSources={[
    //   {
    //     googleCalendarId: '86f3iqrt1q4vmua5pb0fb4q358@group.calendar.google.com',
    //     className: 'gcal-event'
    //   }
    // ]}
    headerToolbar={{
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,listWeek'
    }}
    initialView='dayGridMonth'
    editable={false}
    selectable={false}
    displayEventTime={true}
    eventTimeFormat={{
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false,
        hour12: false
    }}
    nextDayThreshold='23:59:00'
    eventColor='#971849'
    eventTextColor='#ddd'
    firstDay={1}        
/>

如果修改配置后仍然拉取不到数据，逐一排查以下两点：

• 所用Google API密钥已在Google Cloud控制台开启Calendar API权限，密钥的域名/IP限制规则包含当前站点域名，本地调试时可临时关闭限制测试
• 目标Google日历已开启公开访问权限，允许匿名用户读取日程详情

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