无法在 React/Nextjs 中将 Google 日历连接到 Fullcalendar答案

【问题标题】：Can't connect Google Calendar to Fullcalendar in React/Nextjs无法在 React/Nextjs 中将 Google 日历连接到 Fullcalendar
【发布时间】：2022-01-14 12:01:57
【问题描述】：

我正在尝试将 Google 日历用作 Next.js 项目中 Fullcalendar 组件的源。该组件正常工作，采购事件是问题。

我一直在关注官方教程（已过时），使用我生成的 API 密钥和通用的 Google 假期日历。 Tutorial link 这给了我 ReferenceError: XMLHttpRequest is not defined 错误。

<Calendar
   plugins={[dayGridPlugin, listPlugin, googleCalendarPlugin]}
   initialView="listMonth"
   googleCalendarApiKey="API_KEY"
   eventSources="en.usa#holiday@group.v.calendar.google.com"
/>

如果有任何帮助，我将不胜感激，谢谢！

【问题讨论】：

eventSources 应该是一个数组，而不是纯字符串。在fullcalendar.io/docs/google-calendar 上查看完整的日历文档
感谢您的意见！现在得到一个不同的错误：如果我像这样在组件中设置一个事件数组，事件不会显示，但所有内容都会加载：events={[{googleCalendarId: "CALENDAR_ID",},]} 然后如果我将数组更改为具有相同内容的“eventSources”，并且不要重新加载页面 - 事件出现。当我重新加载页面时，我仍然收到 XMLHttpRequest is not defined reference 错误。这是否意味着事件在错误的时间加载/花费了太长时间？

标签： reactjs next.js fullcalendar google-calendar-api fullcalendar-5

【解决方案1】：

Fullcalendar 的 Calendar 组件确实为其 eventSources 参数接收了一个数组。为此，我传入了一个我在上面声明的数组变量：

let INITIAL_EVENTS = [
        {
            googleCalendarId:'calendarID@group.calendar.google.com',
            className:'event'
        }
    ]

然后将其传递给 eventSources

eventSources={INITIAL_EVENTS}

作为结束语，我将使用 dotenv 来管理您的 Google API 密钥。

【讨论】：