How to Embed Google Calendar on Your Website (Step by Step)

An embedded Google Calendar puts your schedule straight onto your website: workshop dates, office hours, event listings, live sessions or opening times. When you update the calendar, the website updates too, so there's no page to edit every time a date changes.

Before you start: decide what visitors should see

Google is clear that a calendar is only visible to the people you share it with. If you embed a private calendar, visitors see an empty grid or nothing at all. So the first step is to make the calendar you want to show public, and that's why it's worth creating a separate calendar just for public events rather than exposing your own diary.

1. In Google Calendar on a computer, create a new calendar, for example Events.
2. Open its settings and, under access permissions, make it available to the public.
3. Add only the events you want visitors to see.

How to embed Google Calendar, step by step

1. Open Google Calendar on a computer. You can't get the embed code from the phone app.
2. Click Settings at the top right.
3. On the left, click the name of the calendar you want to embed.
4. Click Integrate calendar.
5. Under Embed code, click Customize.
6. Choose how the calendar looks: title, view, colours, which buttons to show and the size.
7. Copy the code at the top.
8. Paste it into your website where you want the calendar to appear.

Pasting the code into your website

Site builder	Where to paste
WordPress (block editor)	A Custom HTML block
Wix	An Embed or HTML element
Squarespace	A Code or Embed block
Shopify	A Custom Liquid or HTML section
Hand-coded site	Anywhere in the page's HTML

The catch: small calendars don't display well

Google's own guidance is to choose a width and height of at least 500 pixels each. Squeeze the calendar into a narrow sidebar and the month view becomes unreadable. On phones, the embed shrinks to fit, so test it on a mobile before you publish. If you need something compact, switch the default view to Agenda in the Customize options, which shows a simple list of upcoming events rather than a grid.

One more trap: if you switch off the navigation buttons to tidy the design, Google says visitors can only move between weeks or months using keyboard shortcuts. Most people won't know those, so leave the buttons on.

Letting visitors add your events to their calendar

An embedded public calendar shows an Add to Google Calendar button at the bottom left, so visitors can subscribe to all your events in one click. If you'd rather promote one event, Google lets you publish just that event: open it on your public calendar, click More actions, then Publish event, and paste the code it gives you onto a sales or event page. You can also copy a public link to the single event and use it in emails and social posts.

Good uses of an embedded calendar

• Workshop and webinar dates that change often.
• Office hours or drop-in sessions.
• Community or networking events.
• Opening hours and seasonal closures.

If you're running online events, my guide to calendar marketing shows how to plan the dates you put on that calendar.

Keeping it private where it matters

Making a calendar public means anyone can see every event on it, including descriptions. Never embed your main work calendar. Keep client names, call links and private notes off the public calendar, and check the calendar's description too, because it often shows above the embed.

Customising how the embed looks

The Customize screen gives you more control than most people use. You can change the title shown above the calendar, choose whether visitors see the week, month or agenda view first, show or hide the print button and tabs, set the time zone and pick the background colour. If you run sessions for people in different countries, setting the time zone explicitly avoids confusion about when things start.

Every time you change an option, Google updates the code at the top of the page. Copy it again after your final change, and replace the old code on your website, otherwise your site keeps the earlier settings.

If the calendar doesn't show on your site

1. Check the calendar is public.
2. Make sure you pasted the whole code, from the opening tag to the closing one.
3. Use an HTML or embed block, not a normal text block, which shows the code as text.
4. Clear your website's cache and reload the page.
5. Look at the page while logged out, as a visitor would.

My verdict

Embedding Google Calendar takes five minutes once you know the order: create a separate public calendar, get the code from Integrate calendar, customise it to at least 500 pixels wide and tall, and paste it into a custom HTML block. Leave the navigation buttons on and test on a phone. For a calendar that drives bookings rather than just showing dates, pair it with a clear call to action and, if you run sessions online, the habits that keep remote teams organised.

Frequently asked questions

Why does my embedded calendar show the code as text?

You pasted it into a normal text block. Use a custom HTML or embed block instead.

Why is my embedded Google Calendar empty?

The calendar is probably private. Make it public so website visitors can see its events.

Can I embed Google Calendar from my phone?

No. You can only get the embed code from Google Calendar on a computer.

What size should an embedded Google Calendar be?

Google recommends a width and height of at least 500 each.

Can visitors add my events to their own calendar?

Yes. An embedded public calendar shows an Add to Google Calendar button, and you can publish single events too.

Can I embed Google Calendar in WordPress?

Yes. Paste the embed code into a Custom HTML block.