CODEWITHSUNDEEP
reactjsfullcalendargoogle-calendar-apireact-props
jacver
jacver

Reputation: 63

Connecting Full Calendar (via Google) to React

I am trying to implement Full Calendar with event sourcing from a Google calendar. The calendar is rendering, my API key and calendar ID are console logging correctly from my .env, but I'm getting an error

CalendarDataManager.ts:667 Unknown option 'googleCalendarApiKey'

It sounds like it's not recognizing my prop for the API key, but according to the docs and other tutorials this looks correct. Any thoughts?

import "./eventcalendar.css";

// full calendar node package
import FullCalendar from "@fullcalendar/react"; // must go before plugins
import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin!
import interactionPlugin from "@fullcalendar/interaction"; // allows click events
import googleCalendarPlugin from "@fullcalendar/google-calendar";

function EventCalendar() {
  const googleCalendarURL = process.env.REACT_APP_GOOGLE_API_KEY;
  // const myGoogleCalendarID = process.env.REACT_APP_GOOGLE_ID;
  const myGoogleCalendarID = "[email protected]";

  // When a date grid is clicked, this function will invoke
  const handleDateClick = (dateClickInfo) => {
    console.log(dateClickInfo.dateStr);
  };

  return (
    <div className="calendar-container ">
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin, googleCalendarPlugin]}
        initialView="dayGridMonth"
        dateClick={handleDateClick}
        googleCalendarApiKey={googleCalendarURL}
        events={[{ googleCalendarId: myGoogleCalendarID }]}
      />
    </div>
  );
}

export default EventCalendar;

Upvotes: 2

Views: 714

Answers (1)

jacver
jacver

Reputation: 63

I couldn't find this error anywhere else, so here's what worked for me:

Double check your package.json to make sure all of the @full-calendar packages you're using are there. Mine were installed into two separate areas of my app which caused the error.

Upvotes: 1

Related Questions