Question

无法将 Google 日历连接到 React/Nextjs 中的 Fullcalendar

2021-12-09

886

reactjs next.js fullcalendar google-calendar-api fullcalendar-5

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

我一直在遵循官方教程（已过时），使用我生成的 API 密钥和通用的 Google 假日日历。教程链接这给了我 ReferenceError：XMLHttpRequest 未定义 错误。

<Calendar
   plugins={[dayGridPlugin, listPlugin, googleCalendarPlugin]}
   initialView="listMonth"
   googleCalendarApiKey="API_KEY"
   eventSources="en.usa#[email protected]"
/>

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

Answer 1

Fullcalendar 的日历组件确实接受一个数组作为其 eventSources 参数。为此，我传入了一个数组变量，我已在上面使用以下命令声明该变量：

let INITIAL_EVENTS = [
        {
            googleCalendarId:'[email protected]',
            className:'event'
        }
    ]

然后将其传入 eventSources，使用

eventSources={INITIAL_EVENTS}

最后，我将使用 dotenv 来管理您的 Google API 密钥。

Answer 2

您缺少 googleCalendarId 属性。请根据您的使用情况进行调整：

   <FullCalendar
      plugins={[dayGridPlugin, googleCalendarPlugin]}
      initialView='dayGridMonth'
      weekends={true}
      firstDay={1}
      locale={esLocale}
      googleCalendarApiKey={process.env.NEXT_PUBLIC_CALENDAR_API_KEY}
      eventSources={[
        {
          googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID,
        }
      ]}
      eventContent={renderEventContent}
    />