Google Calendar Embed Generator

Embed a public Google Calendar on your website with the view, time zone and controls you choose — free, with no sign-up.
A calendar ID, a share or embed link, or an iCal address, one per line, e.g. team@example.com. Add a color like #039BE5 after it.Want events with photos, filters and your design?

Embed the calendar

<div style="position:relative;width:100%;max-width:800px;aspect-ratio:4 / 3;">
  <iframe src="https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&amp;showPrint=0&amp;showCalendars=0" title="Google Calendar" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Created with <a href="https://elfsight.com/tools/google-calendar-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

Tip: on phones the Agenda view is easier to read than Month.

  1. Click Copy code above to copy it.
  2. Open the page’s HTML file or template.
  3. Paste the code inside <body>, where the content should appear.
  4. Save and upload the page, then open it in a browser to check.

Want events with photos, filters and your design? Try the Event Calendar widget. See Event Calendar →

Before you go

Want events with photos, filters and your design? Try the Event Calendar widget.

See Event Calendar →
Or share this free tool:
Event Calendar widget

Promote every event in one calendar

Your calendar becomes a central hub that shows every event to more visitors. Add locations, hosts and details in a simple editor, and let visitors find the right event and join it.

  • All your events in one place

  • Locations, hosts and event details

  • Ready-made templates or your own design

Create Widget for Free
No credit card needed
Learn about Event Calendar

Generator vs Google Calendar’s Integrate calendar code

Google Calendar has its own embed code in each calendar’s settings. The generator builds the same kind of code from a link, so you don’t need to open the calendar’s settings.
Google Calendar’s Integrate calendar code
This generator
Where you get the code
Settings → your calendar → Integrate calendar, on a computer
Here, from a link to the calendar
What you start from
The calendar’s settings page, signed in to Google
A public calendar link, an embed link or the public iCal address
Several calendars
The code is built from one calendar’s settings
Add several calendars and give each its own color
Display options
Set on the Customize screen
The same options as switches: view, time zone, week start, language, what to show
Public access
Only people you shared the calendar with see it until you make it public
The same rule: the calendar must be public for visitors to see events

Where you get the code

Google Calendar’s Integrate calendar code

Settings → your calendar → Integrate calendar, on a computer

This generator

Here, from a link to the calendar

What you start from

Google Calendar’s Integrate calendar code

The calendar’s settings page, signed in to Google

This generator

A public calendar link, an embed link or the public iCal address

Several calendars

Google Calendar’s Integrate calendar code

The code is built from one calendar’s settings

This generator

Add several calendars and give each its own color

Display options

Google Calendar’s Integrate calendar code

Set on the Customize screen

This generator

The same options as switches: view, time zone, week start, language, what to show

Public access

Google Calendar’s Integrate calendar code

Only people you shared the calendar with see it until you make it public

This generator

The same rule: the calendar must be public for visitors to see events

Embed parameters

The embed is one address, https://calendar.google.com/calendar/embed?…, with these parameters after ?. Show/hide switches take 1 or 0; everything is shown by default.
Option
What it does
Values
Notes
src
The calendar to show
Calendar ID, e.g. you@gmail.com or …@group.calendar.google.com
Repeat src to combine several calendars.
color
Event color of the calendar before it
Hex with an encoded #: %23D50000
Put a color right after each src. Without %23 the color is ignored.
ctz
Time zone the events are shown in
Time zone name, e.g. America/New_York
Without it, events show in the calendar’s own time zone, not the visitor’s.
mode
Starting view
MONTH (default), WEEK, AGENDA
AGENDA is a list of upcoming events and reads best on narrow screens.
showTitle, showNav, showDate
Calendar title, previous/next and Today buttons, current date range
1 or 0
Without navigation buttons, visitors can only move through dates with keyboard shortcuts.
showPrint, showTabs, showCalendars, showTz
Print icon, view switcher, list of calendars, “Events shown in time zone” line
1 or 0
Keep showTz on if your visitors are in other time zones.
wkst
First day of the week
1 Sunday, 2 Monday, 7 Saturday
—
hl
Language of the calendar interface
Language code, e.g. en, de, es
Event titles stay as you wrote them.
bgcolor
Background color
Hex with %23, e.g. %23FFFFFF
May have no visible effect in the current embed design.

src

What it does

The calendar to show

Values

Calendar ID, e.g. you@gmail.com or …@group.calendar.google.com

Notes

Repeat src to combine several calendars.

color

What it does

Event color of the calendar before it

Values

Hex with an encoded #: %23D50000

Notes

Put a color right after each src. Without %23 the color is ignored.

ctz

What it does

Time zone the events are shown in

Values

Time zone name, e.g. America/New_York

Notes

Without it, events show in the calendar’s own time zone, not the visitor’s.

mode

What it does

Starting view

Values

MONTH (default), WEEK, AGENDA

Notes

AGENDA is a list of upcoming events and reads best on narrow screens.

showTitle, showNav, showDate

What it does

Calendar title, previous/next and Today buttons, current date range

Values

1 or 0

Notes

Without navigation buttons, visitors can only move through dates with keyboard shortcuts.

showPrint, showTabs, showCalendars, showTz

What it does

Print icon, view switcher, list of calendars, “Events shown in time zone” line

Values

1 or 0

Notes

Keep showTz on if your visitors are in other time zones.

wkst

What it does

First day of the week

Values

1 Sunday, 2 Monday, 7 Saturday

Notes

—

hl

What it does

Language of the calendar interface

Values

Language code, e.g. en, de, es

Notes

Event titles stay as you wrote them.

bgcolor

What it does

Background color

Values

Hex with %23, e.g. %23FFFFFF

Notes

May have no visible effect in the current embed design.

Google Calendar Help: Add a Google Calendar to your website ↗

If the calendar doesn’t show events

Visitors see “Sign in to your Google Account”

The calendar isn’t public. Make it public in Google Calendar settings (steps below), then reload your page.

The calendar is empty, but you see events in Google Calendar

Check that you embedded the right calendar ID, and that the calendar is shared with all event details, not See only free/busy (hide details).

Event times are off by a few hours

The embed shows the calendar’s own time zone, not the visitor’s. Set ctz to the time zone your events happen in, and keep showTz on so visitors see which zone the times are in.

You can’t find Make available to public

On a work or school account your administrator may restrict sharing. Ask them, or use a personal Google account for the public calendar. Sharing settings can only be changed on a computer.

You pasted a link with private- in it

That’s the calendar’s secret iCal address, which Google says not to share. Use the Public address in iCal format or the calendar ID instead.

Colors don’t apply

Write the # as %23 (color=%23D50000) and put each color right after its src.

The month view is cramped on phones

Switch the view to Agenda (mode=AGENDA): a list of upcoming events fits narrow screens.

Make your calendar public: step by step

An embedded calendar shows only what Google lets everyone see. Until the calendar is public, visitors get a sign-in prompt instead of your events.

  • Open Google Calendar on a computer. Sharing settings can’t be changed in the mobile app.

  • Click the gear icon at the top right, then Settings.

  • On the left, under Settings for my calendars, click the calendar you want to embed.

  • Under Access permissions for events, check Make available to public, then click OK.

  • Choose whether the public sees all event details or See only free/busy (hide details). For an events calendar, show the details.

  • On the same page, under Integrate calendar, copy the Calendar ID or the Public address in iCal format and paste it into the generator.

Before you do it: a public calendar can be found by anyone and may appear in search results, and people can subscribe to it. Keep private plans in a separate calendar and make only the events calendar public. New events follow the calendar’s default visibility, so check it once.

On a work or school account the option may be missing if your administrator restricts sharing. If you later turn public sharing off, it can take up to 4 hours to apply.

How to embed a Google Calendar

  1. Make the calendar public

    In Google Calendar settings, under Access permissions, turn on “Make available to public”.

  2. Copy the Calendar ID

    In Integrate calendar, copy the Calendar ID and paste it here.

  3. Choose the view

    Pick the view, time zone and controls, then copy the code.

Frequently asked questions

More Embed Code Generators

iFrame Generator

Build a responsive iframe for any page, form or app.iFrame Generator