Embedding Google Calendar on WordPress takes about two minutes. Making it look like part of your site – with your brand, your layout, and events your audience actually wants to explore – takes a little more thought. This guide covers both.
If you manage events and you want them visible on your WordPress site, Google Calendar is a natural starting point. You already use it to organise things. The events are there. The question is how to get them in front of your audience in a way that actually works.
The answer most people find first is the iframe embed – copy a code snippet from Google Calendar settings, paste it into a Custom HTML block in WordPress, done. It works. But it produces a calendar that looks exactly like Google Calendar, complete with Google’s interface, Google’s colour scheme, and Google’s navigation controls. On a professionally designed website, that tends to look like something was bolted on rather than built in.
This guide covers both approaches: the built-in iframe method, which is genuinely useful for basic use cases, and the Revisual approach, which is built specifically for organisations that want their events to look as considered as the rest of their site.
Revisual branded widget
Standard Google Calendar embed
Method 1: The Google Calendar iframe embed
This is the method Google provides natively, and it is the right choice if you need something working quickly and visual polish is not a priority – for example, an internal team page, a simple scheduling reference, or a quick public calendar that you need live today.
Step 1: Make your calendar public
Open Google Calendar and click the settings gear in the top right. Under ‘Settings for my calendars’, click the calendar you want to embed. Find ‘Access permissions for events’ and check ‘Make available to public’. If this calendar contains any private appointments, create a separate calendar for public events first – everything on a public calendar will be visible to anyone.
[SCREENSHOT: Google Calendar settings – Access permissions section showing ‘Make available to public’ checkbox]
Step 2: Get the embed code
Still in the same settings view, scroll down to ‘Integrate calendar’. You will see an embed code section – a block of HTML starting with <iframe. Copy this code. You can also click ‘Customise’ to adjust basic settings like the default view (month, week, agenda), the colour scheme, and whether to show the title and navigation controls.
Step 3: Paste into WordPress
In your WordPress block editor, add a Custom HTML block to the page or post where you want the calendar to appear. Paste the iframe code into the block. Use the Preview option in the block toolbar to check how it renders – the calendar may appear blank in the editor itself but will display correctly in preview and once published.
What you get
A functional, live-updating calendar that reflects whatever is in your Google Calendar. Visitors can navigate between months and click events to see details. The visual style is fixed – Google’s default interface, which cannot be overridden through the iframe alone. On most branded websites, this creates a visible mismatch between the calendar and the surrounding page design.
Method 2: A branded Google Calendar widget with Revisual
If your site has a defined visual identity – a brand colour, a specific typeface, a card-based layout – and your events page is something visitors are meant to explore rather than just reference, the iframe approach will feel out of place. The alternative is to use Revisual, which connects to your Google Calendar and displays events in a fully customisable widget.
The key difference: Revisual reads from your Google Calendar as the source of truth, but the presentation layer is entirely yours. Your brand colours, your fonts, your card layout, your CTA buttons. The Google interface is not visible at all.
What Revisual adds on top of the iframe
- Branded card layout – events displayed as image cards with your colours, typography, and spacing rather than Google’s grid
- Per-element control – show or hide the date, time, location, description, tags, and CTA button independently for each display context
- Hosted event pages – each event gets its own URL, shareable directly or via QR code, with your logo and branding
- Mailchimp integration – the same calendar events can be embedded into email campaigns automatically
- Multiple views – cards, list, monthly grid, and a kiosk/display mode for screens
- Filtering – visitors can filter events by tag, location, or calendar if you have multiple categories
None of these are available through the iframe method. They require a layer between Google Calendar and your website – which is what Revisual provides.
How to embed a Revisual widget on WordPress
Revisual has a dedicated WordPress plugin and a Gutenberg block, so the setup process is straightforward once you have a Revisual account.
Connect your Google Calendar in the Revisual dashboard. Configure your widget – choose layout, set colours and fonts, decide which events and elements to show. In WordPress, add the Revisual block to your page and select the widget. The calendar updates automatically whenever you change events in Google Calendar – no re-publishing required.
Which method is right for your organisation?
The answer depends on what you need the calendar to do.
The iframe method is the right choice when you need something functional quickly, when visual consistency with the rest of your site is not a concern, or when the calendar is mainly for internal reference rather than public event discovery.
Revisual is the right choice when your events page is part of your public-facing identity, when you want visitors to explore and engage with events rather than just check dates, or when you are distributing the same events across multiple channels – website, email, QR codes – and need them to stay in sync automatically.
Most organisations start with the iframe because it is faster. They switch when they notice the visual mismatch, when a stakeholder asks why the calendar looks different from the rest of the site, or when they realise they are manually copying event information into email campaigns rather than automating it.
| Native Google embed | Revisual | |
|---|---|---|
| Setup time | 5 minutes | 10 minutes |
| Visual quality | Basic – Google’s UI | Fully branded |
| Brand control | None | Complete – fonts, colours, layout |
| Auto-updates | Yes | Yes |
| Mobile-friendly | Poor | Yes |
| Event images | No | Yes – via Google Calendar |
| QR codes | No | Auto-generated per calendar and event |
| Hosted event page | No | Yes – shareable link |
| Email/Mailchimp | No | Yes – direct integration |
| Free tier | Yes (always free) | Yes – free plan available |
A practical example: a school events calendar
A school’s events coordinator manages a Google Calendar with term dates, parent evenings, sports fixtures, and open days. They want this visible on the school website so parents can check upcoming events without needing to call the office.
Version 1 – the iframe approach: The iframe is embedded on the school’s events page. It works and updates automatically. But the Google Calendar interface uses a blue and grey colour scheme that clashes with the school’s green and white branding. The month grid is hard to scan on mobile. Parents can see the events, but the page feels unfinished.
Version 2 – the Revisual widget: The same Google Calendar is connected to Revisual. Events display as cards with the school’s green colour scheme and logo. The coordinator adds images for key events like open days. A QR code on the school newsletter links to the hosted events page. Parents can add individual events to their own calendar with one click. When a sports fixture is cancelled, the coordinator removes it from Google Calendar and it disappears from the website, the hosted page, and the newsletter embed automatically.
The underlying data is identical. The experience is entirely different.
Frequently Asked Questions
Yes. Google Calendar provides a native iframe embed code that you can paste directly into a Custom HTML block in the WordPress block editor – no plugin required. This method works for displaying a basic public calendar. For more control over the visual presentation and layout, a tool like Revisual provides a branded widget that connects to your Google Calendar and displays events in a customised format.
The iframe embed method uses Google’s own interface, which cannot be styled to match your website’s brand. The colours, fonts, and layout are fixed by Google. To display Google Calendar events in a style that matches your site, you need a tool that reads your calendar data and renders it in a custom format – Revisual is built specifically for this purpose.
Yes, for both methods. The iframe embed reflects changes to your Google Calendar as soon as Google processes them, typically within a few minutes. Revisual also syncs automatically – when you update, add, or remove an event in Google Calendar, the change appears across your website widget, hosted event page, and any email embeds without any manual action.
The iframe method shows all events on the calendar you embed. To show only selected events, the simplest approach is to create a dedicated public calendar for website events and keep internal or private events on a separate calendar. Revisual adds a filtering layer on top of this, allowing you to choose which events appear based on tags, dates, or calendar source – giving you precise control over what your audience sees.
The iframe embed method is completely free – it uses Google’s native embed code and the WordPress Custom HTML block, with no additional tools required. Revisual has a free tier that covers basic embedding with limited views per month. For organisations with higher traffic or advanced distribution needs (email campaigns, QR codes, multiple widgets), paid plans are available.
The standard iframe embed is functional on mobile but not optimised – the month grid can be cramped on small screens. For a better mobile experience, use the agenda or list view in the iframe settings, or use Revisual which renders events as responsive cards that reflow cleanly across screen sizes.
About the author
Piotr Pozniak
Piotr’s is the cofounder of Revisual, a dedicated tool for seamlessly sharing events. With over six years of experience developing the platform, he brings extensive expertise in streamlining business processes through technology solutions. Work with partners across industries has honed his ability to optimize event workflows and enhance data accessibility.
