# How to integrate Google Calendar in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Integrate Google Calendar with your Bubble app by setting up OAuth2 authentication through the API Connector, then creating API calls to read events, create new events, and update existing ones. Users authorize their Google account once, and your app can then display their calendar events and push new events directly from Bubble workflows.

## Integrating Google Calendar with Your Bubble App

Google Calendar integration lets your app sync with users' calendars — display their events, create new ones from bookings or appointments, and keep everything in sync. This tutorial covers setting up the Google Calendar API via Bubble's API Connector with OAuth2 authentication, pulling events into your app, and creating events from Bubble workflows. Ideal for booking apps, project managers, or any tool that involves scheduling.

## Before you start

- A Bubble account with an app open in the editor
- A Google Cloud Console account with a project created
- The Google Calendar API enabled in your Google Cloud project
- OAuth 2.0 credentials (Client ID and Client Secret) from Google Cloud Console
- The API Connector plugin installed

## Step-by-step guide

### 1. Set up OAuth 2.0 credentials in Google Cloud Console

Go to console.cloud.google.com → select your project → APIs & Services → Credentials → Create Credentials → OAuth client ID. Select 'Web application' as the type. Add your Bubble app's redirect URL in 'Authorized redirect URIs' — it follows the pattern: https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. Copy the Client ID and Client Secret. Also go to OAuth consent screen and configure your app name and scopes — add 'https://www.googleapis.com/auth/calendar' for full calendar access.

**Expected result:** OAuth credentials (Client ID and Secret) are created with the correct redirect URI and calendar scope.

### 2. Configure the Google Calendar API in the API Connector

In Bubble, go to Plugins → API Connector → Add another API. Name it 'GoogleCalendar.' Set Authentication to 'OAuth2 User-Agent Flow.' Enter: App ID = your Client ID, App Secret = your Client Secret, Scope = 'https://www.googleapis.com/auth/calendar', Login dialog redirect = 'https://accounts.google.com/o/oauth2/v2/auth', Access token endpoint = 'https://oauth2.googleapis.com/token'. Check 'Use a generic redirect URL' and copy the generated redirect URL back to your Google Cloud Console authorized redirect URIs if it differs.

**Expected result:** The API Connector is configured with Google's OAuth2 flow, ready to authenticate users.

### 3. Create an API call to fetch calendar events

Add a new call named 'get_events.' Set Use as: Data, Method: GET, URL: https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=[start_date]&timeMax=[end_date]&singleEvents=true&orderBy=startTime. Add parameters: start_date (test value: RFC 3339 format like '2026-03-01T00:00:00Z') and end_date. Click 'Initialize call' — it will prompt you to authenticate with Google. After authorizing, the response maps fields including items (the event list), each with summary, start, end, description, and location.

> Pro tip: Use 'singleEvents=true' to expand recurring events into individual instances. Without it, recurring events show as a single entry with recurrence rules.

**Expected result:** The API call is initialized and returns a list of calendar events with titles, dates, and descriptions.

### 4. Display Google Calendar events in your app

On your calendar or schedule page, add a Repeating Group with Type of content set to 'get_events items' (the nested type from the API response). Set the Data source to 'Get data from an external API → GoogleCalendar - get_events' with start_date = Current date/time:rounded down to month (formatted as RFC 3339) and end_date = same + 1 month. In each cell, display: summary (event title), start's dateTime (formatted), end's dateTime, and description.

**Expected result:** Your app displays the user's Google Calendar events for the current month in a Repeating Group.

### 5. Create a workflow to add new events to Google Calendar

Add another API call named 'create_event.' Set Use as: Action, Method: POST, URL: https://www.googleapis.com/calendar/v3/calendars/primary/events. Add header: Content-Type = application/json. Set the body with dynamic parameters for event details. Initialize with test data. On your booking or event creation page, after saving the event to your Bubble database, add the plugin action: GoogleCalendar - create_event with parameters mapped from your form inputs.

```
{
  "summary": "<event_title>",
  "description": "<event_description>",
  "start": {
    "dateTime": "<start_datetime>",
    "timeZone": "America/New_York"
  },
  "end": {
    "dateTime": "<end_datetime>",
    "timeZone": "America/New_York"
  },
  "location": "<location>"
}
```

**Expected result:** Events created in your Bubble app are automatically added to the user's Google Calendar.

### 6. Add the Google authorization button for users

On the user settings or first-use page, add a Button labeled 'Connect Google Calendar.' In the workflow: When clicked → Account → Signup/login with a social network → select GoogleCalendar (the OAuth2 API you configured). This triggers the Google OAuth flow, asking the user to grant calendar access. Once authorized, all subsequent API calls will use the user's access token automatically. Add a conditional to show 'Connected' status when the user has already authorized.

**Expected result:** Users can authorize their Google account with one click, and the app maintains the connection for future API calls.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "GoogleCalendar",
  "authentication": {
    "type": "OAuth2 User-Agent Flow",
    "client_id": "[YOUR_CLIENT_ID]",
    "client_secret": "[YOUR_CLIENT_SECRET]",
    "scope": "https://www.googleapis.com/auth/calendar",
    "auth_url": "https://accounts.google.com/o/oauth2/v2/auth",
    "token_url": "https://oauth2.googleapis.com/token"
  },
  "calls": [
    {
      "name": "get_events",
      "use_as": "Data",
      "method": "GET",
      "url": "https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=[start_date]&timeMax=[end_date]&singleEvents=true&orderBy=startTime"
    },
    {
      "name": "create_event",
      "use_as": "Action",
      "method": "POST",
      "url": "https://www.googleapis.com/calendar/v3/calendars/primary/events",
      "headers": { "Content-Type": "application/json" },
      "body": {
        "summary": "[title]",
        "description": "[description]",
        "start": { "dateTime": "[start_iso]", "timeZone": "[timezone]" },
        "end": { "dateTime": "[end_iso]", "timeZone": "[timezone]" },
        "location": "[location]"
      }
    },
    {
      "name": "delete_event",
      "use_as": "Action",
      "method": "DELETE",
      "url": "https://www.googleapis.com/calendar/v3/calendars/primary/events/[event_id]"
    }
  ]
}
```

## Common mistakes

- **Using incorrect date format for the Google Calendar API** — Google Calendar API requires RFC 3339 format (e.g., '2026-03-28T10:00:00-04:00'). Bubble's default date formatting does not match this. Fix: Format dates using Bubble's ':format as' operator with a custom format matching RFC 3339, or use the ':formatted as ISO 8601' option.
- **Not enabling the Google Calendar API in Google Cloud Console** — Even with correct OAuth credentials, API calls will fail with a '403 Forbidden' error if the Calendar API is not enabled for your project. Fix: Go to APIs & Services → Library → search 'Google Calendar API' → click Enable.
- **Forgetting to add the redirect URI to Google Cloud Console** — OAuth authorization will fail with a 'redirect_uri_mismatch' error if the Bubble redirect URL is not listed in your Google Cloud credentials. Fix: Copy the exact redirect URL from the API Connector and add it to Authorized redirect URIs in your Google OAuth credentials.

## Best practices

- Always use 'singleEvents=true' when fetching events to expand recurring events into individual instances
- Format dates in RFC 3339 format for all Google Calendar API calls
- Store the Google Calendar event ID in your Bubble database so you can update or delete events later
- Add timezone handling — pass the user's timezone with event creation requests
- Cache fetched events in your Bubble database to reduce API calls and enable offline display
- Show a clear 'Connect Google Calendar' button with authorization status indicators

## Frequently asked questions

### Do users need a Google account to use this integration?

Yes. Users must authorize their Google account through the OAuth flow. Non-Google users cannot use Google Calendar features.

### Can I access shared or team calendars?

Yes. Replace 'primary' in the API URL with the specific calendar ID (found in Google Calendar settings). The user must have access to that calendar.

### What happens when the OAuth token expires?

Bubble's API Connector handles token refresh automatically using the refresh token stored during initial authorization. Users do not need to re-authorize.

### Can I set up two-way sync between Bubble events and Google Calendar?

Yes. When creating events in Bubble, also create them in Google Calendar. When events are updated in Google Calendar, use Google's push notifications (webhooks) to update your Bubble database. The webhook setup requires a backend workflow endpoint.

### Is there a simpler alternative without OAuth?

For read-only access to public calendars, you can use Google Calendar's public iCal feed URL without authentication. For private calendars, OAuth is required.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-with-google-calendar-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-with-google-calendar-in-bubble