next.js - Can't seem to find a way to integrate google calendar with fullcalendar - Stack Overflow

I am trying to make an event calendar for a club I am running but I can't seem to be able to figure out how to integerate google calendar into fullcalendar using jsx. I have tried looking through the documentation provided by fullcalendar but I cannot really find anything useful/beneficial for me. If someone could help me though this that would be great.

The code that i have for the calendar is below:

"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";
// The import order DOES MATTER here. If you change it, you'll get an error!
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 ]}
          initialView="dayGridMonth"
          weekends={false}
          events={[
          { title: 'Meeting: Group A', date: '2025-01-30' },
          { title: 'event 2', date: '2019-04-02' }
          ]}
        />
      </div>
    </motion.div>
  );
};

export default Calendar;

I tried looking through documentation expecting to see something useful but could not find anything, I also looked through google and youtube but still nothing. I also looked through this stackoverflow but didnt find anything specifically related to jsx.

I am trying to make an event calendar for a club I am running but I can't seem to be able to figure out how to integerate google calendar into fullcalendar using jsx. I have tried looking through the documentation provided by fullcalendar but I cannot really find anything useful/beneficial for me. If someone could help me though this that would be great.

The code that i have for the calendar is below:

"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";
// The import order DOES MATTER here. If you change it, you'll get an error!
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 ]}
          initialView="dayGridMonth"
          weekends={false}
          events={[
          { title: 'Meeting: Group A', date: '2025-01-30' },
          { title: 'event 2', date: '2019-04-02' }
          ]}
        />
      </div>
    </motion.div>
  );
};

export default Calendar;

I tried looking through documentation expecting to see something useful but could not find anything, I also looked through google and youtube but still nothing. I also looked through this stackoverflow but didnt find anything specifically related to jsx.

• next.js
• fullcalendar
• google-calendar-api

Share Improve this question Follow edited Jan 31 at 9:20 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Jan 30 at 2:03 ShiviShivi 1122 bronze badges 2

• The instructions for showing a google calendar feed in your fullCalendar are here: fullcalendar.io/docs/google-calendar, complete with examples . Is there a specific bit of this you got stuck on? The code you've posted doesn't seem to show any attempt to implement your requirement. (Whilst you seem to be using React here for the front-end code, and the examples in the documentation use vanilla JS, the only real difference should be the specifics of syntax such as using ={ } to define properties). Can you clarify what your exact issue is, please? – ADyson Commented Jan 31 at 9:18
• Nevermind I got the answer! – Shivi Commented Jan 31 at 21:36

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In my experience, you have to install and add google-calendar plugin exactly.

1. Install @fullcalendar/google-calendar.
2. import googleCalendarPlugin from "@fullcalendar/google-calendar";