JSX环境下Google Calendar与FullCalendar集成问题求助

步骤1：安装Google Calendar插件 #

首先安装FullCalendar官方提供的Google Calendar集成插件：

npm install @fullcalendar/google-calendar

步骤2：准备Google Calendar配置信息 #

• 获取公共日历ID：打开Google Calendar，进入目标日历的「设置和共享」，找到格式类似xxxxxx@group.calendar.google.com的「日历ID」，同时确保该日历已设置为「公开访问权限」（至少开启「查看所有事件」）。
• 生成Google API密钥：前往Google Cloud Console，创建新项目并启用「Calendar API」，在「API和服务」→「凭据」页面生成API密钥，建议限制密钥仅用于Calendar API以提升安全性。

步骤3：修改日历组件代码 #

在现有代码中导入Google Calendar插件，并配置相关参数：

"use client";

import { FaReact, FaNodeJs } from "@/node_modules/react-icons/fa";
import {
  SiTailwindcss,
  SiNextdotjs,
  SiExpress,
  SiPostgresql,
  SiFirebase,
  SiDocker,
} from "react-icons/si";
import { motion } from "framer-motion";
import FullCalendar from "@fullcalendar/react";
// 导入Google Calendar插件
import googleCalendarPlugin from "@fullcalendar/google-calendar";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import dayGridPlugin from '@fullcalendar/daygrid';
// components
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Calendar = () => {
  return (
    <motion.div
      initial={{ y: "-200vh" }}
      animate={{ y: "0%" }}
      transition={{ duration: 1 }}
      className="min-h-[80vh] flex items-center justify-center py-12 xl:py-0"
    >
      <div className="w-full">
        <FullCalendar
          plugins={[ dayGridPlugin, googleCalendarPlugin ]} // 加入Google Calendar插件
          initialView="dayGridMonth"
          weekends={false}
          // 配置Google Calendar参数
          googleCalendar={{
            apiKey: "你的Google API密钥",
            calendarId: "你的公共日历ID"
          }}
          // 如需同时展示本地测试事件，可通过eventSources合并数据源
          eventSources={[
            {
              googleCalendar: {
                apiKey: "你的Google API密钥",
                calendarId: "你的公共日历ID"
              }
            },
            {
              events: [
                { title: 'Meeting: Group A', date: '2025-01-30' },
                { title: 'event 2', date: '2019-04-02' }
              ]
            }
          ]}
        />
      </div>
    </motion.div>
  );
};

export default Calendar;

关键注意事项 #

• 目标日历必须设置为公开，否则API无法获取事件数据。
• API密钥需做好权限限制，避免被滥用。
• 由于FullCalendar依赖客户端DOM操作，Next.js环境下必须保留"use client"标识。
• 插件导入顺序无需调整Google Calendar插件的位置，但需保证@fullcalendar/react在所有插件之前导入（当前代码已符合要求）。

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