FullCalendar not displaying Google Calendar events properly

Other Questions Google calendar
1

I’m having trouble getting my Google Calendar events to show up in FullCalendar. The calendar widget displays fine but no events appear. I’ve checked multiple tutorials and my setup looks right to me.

<link rel='stylesheet' type='text/css' href="calendar-plugin/styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="calendar-plugin/google-integration.js"></script>
<script src="assets/jquery.min.js"></script>
<script src="assets/jquery-ui.min.js"></script>
<script src="calendar-plugin/main.js"></script>

<script>
$(function() {
$('#myCalendar').fullCalendar({
    eventSources: [{ 
        url: "https://www.google.com/calendar/feeds/myemail%40gmail.com/public/basic" 
    }]
});
});
</script>

Any ideas what might be wrong? Thanks for any help you can provide!

2

totally get ur frustration! the old feed links are toast. gotta switch to the new Google Calendar API v3 and use an auth token instead. they phased out the basic feeds, so that’s y no events are showing up. gl!

3

You’re using the old XML feed format - that’s the problem. Google killed those public XML feeds years ago, so they barely work anymore. Switch to Calendar API v3. Go to Google Cloud Console, create a project, enable the Calendar API, and grab an API key. Then use this format: https://www.googleapis.com/calendar/v3/calendars/YOUR_CALENDAR_ID/events?key=YOUR_API_KEY. Oh, and make sure your calendar’s actually public if you’re not using OAuth. Had this exact issue last year - switching to v3 fixed everything.

4

That old Google Calendar feed URL got deprecated years ago. Google killed those public feeds and now requires OAuth authentication.

But the URL isn’t your only problem. You’ve got API authentication, CORS policies, token management, and rate limiting to deal with. Even after fixing auth, you’ll still need to handle token refreshes and error cases.

I hit this same issue building a dashboard that pulled events from multiple Google Calendars. Instead of fighting OAuth complexity and maintaining API connections, I used Latenode to handle it.

Just create a workflow that authenticates with Google Calendar API, grabs your events, formats them for FullCalendar, and serves them through a webhook. Takes 10 minutes to set up and handles all the auth pain automatically.

The workflow runs on schedule to keep your calendar data fresh. You can easily add filtering, formatting, or combine events from multiple sources too.

Check it out at https://latenode.com

5

The Google Calendar feed URL you’re using is from the old v2 API, which is no longer supported. I faced the same issue before when updating a project last year.

You need to use the v3 API and set up authentication correctly. The public feeds don’t work as they used to.

Here’s the plan:

  1. Go to the Google Cloud Console and create a new project.
  2. Enable the Calendar API there.
  3. Generate credentials: an API key for public calendars or OAuth for private calendars.
  4. Use the v3 endpoint format for your requests.

For a public calendar, your URL should look like this:
https://www.googleapis.com/calendar/v3/calendars/YOUR_CALENDAR_ID/events?key=YOUR_API_KEY

Also, keep an eye on your browser console for CORS errors. Google’s API has strict CORS rules, so you may need to fetch the events server-side and proxy them to your frontend.

What I do is fetch the events separately with an HTTP request, parse the JSON response, and then pass the formatted events directly to FullCalendar rather than using eventSources with the old URL.