How to integrate Google Calendar in Bubble

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.

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.

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.

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.

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.

1{
2  "summary": "<event_title>",
3  "description": "<event_description>",
4  "start": {
5    "dateTime": "<start_datetime>",
6    "timeZone": "America/New_York"
7  },
8  "end": {
9    "dateTime": "<end_datetime>",
10    "timeZone": "America/New_York"
11  },
12  "location": "<location>"
13}

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.