This tutorial walks through using Bricks’ API query type to fetch events directly from a Google calendar using Google’s Calendar API & using the calendar element to display these in a calendar in Bricks.
What you’ll need first
- A Google Cloud API key with the Calendar API enabled (console.cloud.google.com → enable “Google Calendar API” → Credentials → Create API key)
- The Calendar ID for your calendar, find it under Settings → your calendar calendar → Integrate calendar → Calendar ID. (it will look like an email address)
Limitations to this method
As we’re using an external API for the query loop, some of Bricks’ post-specific features won’t work.
- Bricks Filter elements – Filtering is only possible with posts/terms/users query loop types, not API.
- Click-to-popup. As there’s no actual post for the data to coming from via AJAX, displaying a popup template with AJAX enabled won’t work.
Once you have your calendar ID, and your Google Calendar API key, the rest can be set up within Bricks.
Step 1: Set up the Query Loop
On the Calendar element, set the query type to API, then enter the base endpoint
URL: https://www.googleapis.com/calendar/v3/calendars/{CALENDAR_ID}/events
Method: GET
Response path: items
(Replace {CALENDAR_ID} above with your actual calendar’s ID)
Step 2: Add URL parameters
Under URL parameters, these two are required as separate key/value row:
key: your Google Calendar API key goes here
singleEvents: true (this is required in order to show any recurring events).
Optional other URL parameters..
timeMin: e.g. 2026-01-01T00:00:00Z (optional) — bounds the earliest date returned
timeMax: e.g. 2027-01-01T00:00:00Z (optional) — bounds the latest date returned
maxResults: e.g. 2500 (optional) — raises the cap above the default 250
Click ‘fetch data’ and you should see it fill up with the event data on the right hand side under the response path heading. If you click the objects, they will open to show what data is available for each event and what the keys are.
Now the query loop is set up and the data is accessible, we just need to map the data to the fields in the calendar element settings.
Step 3: Map the event fields
Under the Calendar element’s field settings, use Bricks’s query_api dynamic tag to pull the needed data from the events using @key. Note that nested fields (like start/end time) use a pipe (|):
Start field: {query_api @key:’start|dateTime’ @fallback:’{query_api @key:”start|date”}’}
End field: {query_api @key:’end|dateTime’ @fallback:’{query_api @key:”end|date”}’}
Location field: {query_api @key:’location’}
Description field: {query_api @key:’description’}
(The fallback in the start date and end date fields is to handle all day events where there’s no time added)
Step 4: Link to the events
If you wish to link the events in your Google calendar, so that when a user clicks the event in the calendar it takes them to the real event in your Google calendar, choose ‘link’ as the click action and grab the link from within the same API response.
That’s it
Now the events from your Google calendar should render on your page via the calendar element.
