Embed A Google Calendar In A Web Page

August 11, 2020 • Google Calendar • Published By Josh • 4 minute read

Displaying a calendar in a web page can be helpful for a business. It allows visitors to see upcoming events or time slots being offered. Google Calendar provides various options when embedding. Let’s review the various options and learn how to embed a Google Calendar in a web page!

Title
Navigation
Date Picker
Print
Views
Calendar List
Time Zone
Embed Code
Embed Helper

Title

The title displays the currently selected calendar title.

If you want to display the calendar’s title, you would include the showTitle argument with a value equal to 1. If you want to hide the calendar’s title, change the value to 0.

showTitle=1

If you want to display a custom calendar title, you would include the title argument with a value equal to your custom title. The value should be url encoded. In the above example, %20 is the encoded value for a space.

title=Custom%20Title

Navigation

The navigation provides options to jump to the current day as well as navigate between months.

If you want to show the navigation options, you would include the showNav argument with a value equal to 1. If you want to hide the navigation options, change the value to 0.

showNav=1

Date Picker

The date picker displays the current date and selecting it provides a drop down calendar allowing you to quickly select different days or navigate to different months.

If you want to show the date picker, you would include the showDate argument with a value equal to 1. If you want to hide the date picker, change the value to 0.

showDate=1

Print

The print option provides a print friendly view of the calendar.

If you want to show the print option, you would include the showPrint argument with a value equal to 1. If you want to hide the print option, change the value to 0.

showPrint=1

Views

The calendar view can be by Week, Month, or Agenda and you can set one of them as the default view.

If you want to show the different view options, you would include the showTabs argument with a value equal to 1. If you want to hide the view options, change the value to 0.

showTabs=1

If you want to set a default view, you would include the mode argument with a value equal to WEEK, MONTH, or AGENDA

mode=AGENDA

Calendar List

You can actually include more than one calendar and display a list of them to toggle on/off.

If you want to show the calendar list, you would include the showCalendars argument with a value equal to 1. If you want to hide the calendar list, change the value to 0.

showCalendars=1

For every calendar you want to include, you include the src argument with a value equal to its unique id.

src=UNIQUE_ID_HERE

Time Zone

If you want to show the calendar’s time zone, which will appear at the bottom of the calendar, you would include the showTz argument with a value equal to 1. If you want to hide the time zone from appearing, change the value to 0.

showTz=1

If you want to set the calendar’s time zone, you would include the ctz argument with a value equal to the time zone. The value should be url encoded. In the above example, %2F is the encoded value for a forward slash.

ctz=America%2FNew_York

Embed Code

The embed code begins with the below, replacing the text INSERT_ARGUMENTS_HERE with the arguments we just reviewed.

<iframe src="https://calendar.google.com/calendar/embed?INSERT_ARGUMENTS_HERE" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

As you can see in the below example, we separate each argument with an encoded ampersand.

<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&showTitle=1&showNav=1&showDate=1&showTabs=1&showCalendars=1&showTz=1&showPrint=1&mode=AGENDA" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Embed Helper

If you want to review all of these options and more, as well as see a visual of what the embedded calendar could look like, you can do so by navigating to the following: