Embed Google Calendar on a website or blog


You may have a website for your venue, charity, local sports team, or something similar where you would share an event schedule. List those events in Google Calendar and you can easily get the code to embed the calendar for everyone to see.

RELATED: How to Share a Static Snapshot of Your Google Calendar

Get the Google Calendar embed code

go to google calendar in your browser, log in and click the gear icon in the top right corner to open the Settings menu. Select ‘Settings’.

On the Settings screen, if you have more than one, choose a calendar on the left under Settings for my calendars. Then choose “Integrate Calendar” or scroll to that section on the right.

You will see a code block in the Embed Code area. You can simply select and copy this code to insert your Google calendar with default settings.

If you want to make changes to the appearance, calendars displayed, color or size, click “Customize” to change the code.

Modify the code

After clicking the Customize button for the embed code, your browser will open a new tab. Here’s the same embed code at the top with a preview of your calendar below.

RELATED: How to Create and Customize a New Google Calendar

On the left you will find your customization options. Allows you to set the exact appearance and size of the desired calendar.

Calendar title: You can enter a calendar title from the top left. This will replace the default name of your calendar.

Show: Then you will see several options under Show. By default, all items are checked, but you can uncheck the ones you don’t want to appear in the calendar. This includes things like the title, navigation buttons, print icon, and date.

Size: If you have a specific size that you want to embed on your site, you can adjust it for the calendar. Enter the Width and Height or use the arrows to increase or decrease those dimensions in pixels.

Background Color: If you want to add spice to your calendar, you can choose a background color for the top section.

Border: Check the box for Border if you want to include one in the calendar.

Calendar settings: you will then see the calendar settings for the default view (week, month, agenda), week starts on, language and time zone. Use the drop-down list below any of these settings to change the appearance of your calendar.

Calendars to display: Finally, you can choose more than one calendar to display if you want. For example, if this is for a family site, you could include Family and Birthdays.

With each adjustment you make to the above items, the embed code at the top changes to accommodate those changes. Give it a few seconds to update with each change.

When you’re happy with your calendar’s appearance and settings, click the Copy icon to the right of the Embed Code box. This places the code on your clipboard so you can paste it where needed.

Please note that the process of pasting or entering this code on your site or blog will vary depending on the service or application you are using. Refer to your service’s documentation for help with embedding.

For more information, see how to share Google Calendar with specific people.

Leave a Reply

Your email address will not be published.