React Google Calendar Component

I’ve had to build dozens of scheduling tools for clients ranging from healthcare startups in New York to logistics firms in Chicago.

One thing I’ve learned is that users rarely want a new, isolated calendar; they want their existing Google Calendar data inside your app.

In this guide, I’ll show you exactly how to integrate a Google Calendar component into your React application using the most reliable methods I’ve used in production.

Table of Contents

Choose the Right Approach for Your Project

When I first started with React, I tried to build every component from scratch, but for calendars, that is a massive undertaking.

I quickly realized that leveraging battle-tested libraries like FullCalendar or specialized wrappers is much more efficient for professional-grade software.

Depending on your needs, you might want a simple read-only view or a full-blown interactive scheduler where users can book “Coffee Chats” or “Project Syncs.”

Method 1: Use FullCalendar with the Google Calendar Plugin

This is my go-to method for most enterprise-level projects in the USA because FullCalendar is incredibly robust and handles time zones perfectly.

It has a dedicated plugin that talks directly to the Google Calendar API, which saves you from writing complex fetch logic.

Step 1: Get Your Google API Key and Calendar ID

Before writing code, you need two things from the Google Cloud Console: an API Key and a Public Calendar ID.

I usually create a dedicated “Public Events” calendar for testing to ensure I’m not exposing any private data during development.

Step 2: Install the Dependencies

First, you need to install the core FullCalendar packages and the Google Calendar plugin.

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/google-calendar

Step 3: Implement the Component

Here is the complete code for a component that displays a “Team Marketing Schedule.” Notice how I use the googleCalendarApiKey prop to authenticate.

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import googleCalendarPlugin from '@fullcalendar/google-calendar';

const MarketingCalendar = () => {
  // Replace these with your actual credentials
  const GOOGLE_API_KEY = 'YOUR_GOOGLE_API_KEY';
  const CALENDAR_ID = 'your-calendar-id@group.calendar.google.com';

  return (
    <div style={{ padding: '20px', maxWidth: '1100px', margin: '0 auto' }}>
      <h2>Project Roadmap - Q1 2026</h2>
      <FullCalendar
        plugins={[dayGridPlugin, googleCalendarPlugin]}
        initialView="dayGridMonth"
        googleCalendarApiKey={GOOGLE_API_KEY}
        events={{
          googleCalendarId: CALENDAR_ID,
          className: 'marketing-event',
        }}
        eventClick={(info) => {
          // Prevent the browser from following the link
          info.jsEvent.preventDefault(); 
          
          if (info.event.url) {
            window.open(info.event.url, "_blank");
          }
        }}
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek'
        }}
      />
    </div>
  );
};

export default MarketingCalendar;

You can refer to the screenshot below to see the output.

Method 2: Custom Integration via Google Calendar API

Sometimes a pre-built UI library is too “heavy” for a simple dashboard widget.

In these cases, I prefer fetching the data myself using the native fetch API and displaying it in a custom-styled list or a lightweight grid.

This approach is great if you want to show a “Coming Up Next” sidebar for a user’s dental appointment in Los Angeles or a flight departure from JFK.

The Implementation Code

In this example, we fetch the next five upcoming events and render them in a clean, modern list format.

import React, { useState, useEffect } from 'react';

const UpcomingEvents = () => {
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);

  const API_KEY = 'YOUR_GOOGLE_API_KEY';
  const CALENDAR_ID = 'primary'; // Or your specific ID

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        const now = new Date().toISOString();
        const url = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}&timeMin=${now}&maxResults=5&orderBy=startTime&singleEvents=true`;
        
        const response = await fetch(url);
        const data = await response.json();
        
        if (data.items) {
          setEvents(data.items);
        }
      } catch (error) {
        console.error("Error fetching calendar data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchEvents();
  }, []);

  if (loading) return <div>Loading your schedule...</div>;

  return (
    <div style={{ 
      fontFamily: 'Arial, sans-serif', 
      border: '1px solid #ddd', 
      borderRadius: '8px', 
      padding: '15px',
      backgroundColor: '#f9f9f9' 
    }}>
      <h3 style={{ borderBottom: '2px solid #007bff', paddingBottom: '10px' }}>
        Next 5 Sessions - USA Office
      </h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {events.map((event) => (
          <li key={event.id} style={{ marginBottom: '15px', padding: '10px', background: '#fff', borderRadius: '4px', boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}>
            <strong style={{ display: 'block', fontSize: '1.1rem' }}>{event.summary}</strong>
            <span style={{ color: '#666' }}>
              {new Date(event.start.dateTime || event.start.date).toLocaleString('en-US', {
                weekday: 'long',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
              })}
            </span>
            {event.location && (
              <p style={{ margin: '5px 0 0', fontSize: '0.9rem', color: '#007bff' }}>
                📍 {event.location}
              </p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UpcomingEvents;

You can refer to the screenshot below to see the output.

Important Security Note

One mistake I often see junior developers make is hardcoding the API key in the frontend and pushing it to GitHub.

I always recommend using environment variables (.env) to store these keys and restrict your API key in the Google Cloud Console to only allow requests from your specific domain.

This prevents someone else from stealing your key and running up your quota.

Make the Calendar Interactive

Integrating a Google Calendar isn’t just about showing dates; it’s about making them useful.

I typically add “Add to Calendar” buttons or sync statuses so the user knows exactly when their data was last updated from the server.

In professional apps, I also use the description field of the Google event to store metadata, like a Zoom link or a specific client ID, which I can then parse and display as a clickable button in React.

Troubleshooting Common Issues

If your calendar isn’t showing up, the first thing I check is the sharing settings.

The calendar must be set to “Public” in the Google Calendar settings for these simple API methods to work without complex OAuth2 login flows.

If you see a “403 Forbidden” error, it’s almost always because the “Make available to public” checkbox isn’t ticked in your Google Calendar settings.

I hope you found this tutorial helpful! Integrating Google Calendar into React can seem daunting at first, but with libraries like FullCalendar or the direct API, it becomes a very manageable task.

You may also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/