How Do I Work with an Embedded Google Calendar?

Navigate to our DX Training Video guide for further visual guidance.

The Google Calendar Embed is a media library item. You can use it on the site in a Basic Page or in a Landing Page layout.

If you want to embed a Google Calendar, you probably already manage one here: https://calendar.google.com. Your calendar will have a name and will be "public," meaning the general public may view it.

Other calendars, choose the heavy plus sign

On the sidebar of your calendar.google.com link, choose the heading for Other calendars, and choose the heavy plus sign to access options

At this Other Calendars header, choose to browse calendars of interest. Or go to your existing calendar if you already have one that is publicly available.

Browser a calendar of interest

You must already have a calendar.google.com account, first go to your account then look for the heavy "plus" + sign next to the "Other Calendars" heading. Choose to Browse Calendars

Each individual calendar has a link associated with it. Choose from what is publicly available or, more likely, what you already are managing.

Phases of the moon sample calendar

For example, these are available public Google calendars of interest. Choose one, in this case we choose Phases of the Moon


For each calendar, there is a Google-generated link in the Public URL to this calendar.

Copy and paste the Public URL of this calendar

Public Calendars offer a public link - we want the copy-and-paste text from that public link. Do NOT use the  iframe  link.

Note that you may already have items inside your existing media library at Content | Media | Media library.

For adding a new media library Google Calendar embed, navigate to Content | Media | Add media | Google Calendar.

Add a Google Calendar Embed as a media library item

Each Google Calendar has its own "shared link" that may be used to share the calendar with the general public. The calendar must be able to be shared with the public, in order to display as part of this feature

When you create a new Media item, enter the URL. This adds the Public URL to the calendar in the Remote Media URL.

Choose the media library item of type Google Calendar to add that URL

When working with the media library, choose Google calendar and input the URL you have chosen.

Once entered in the media library, your calendar is available for placement

When navigating to Content | Media | Media Library, you may now sort by the available Google Calendar Embeds you've added to your website, and this may be placed on other content as an "embedded" media item.

When creating or editing a basic page, use the 31 to place your desired Google Calendar

The WYSIWYG Editor is typically used for bolds, italics, and links - the 31 icon refers to the Google Calendar Embeds from the media library.

Choose the desired calendar from the popup modal

When the 31 icon is chosen and clicked, a popup modal window appears, from which you choose your desired calendar: in this case we choose the uploaded Phases of the Moon publicly-available Google calendar

The Google Calendar is now embedded on your basic page

Place the chosen media item and click "Save" to save changes to your basic page. The Basic Page will show your Google Calendar Embed. Note that the Google Calendar Embed may also be placed in a Block, inside a Section,  on a Landing Page.

Google Calendar Embeds work with both Basic Pages as well as Landing Pages.

On your Landing Page, add a new Section. Next, create a Block. Then, pick your Google Calendar from the options. It will automatically stretch to fit the page.

1

Log in to your site

You can login to your site from login.iowa.gov.

how to login to DX website

Each person on your agency team has a specific user role for the website. These roles set permissions. They control who can edit, review, and publish content. You can ask for a role change or remove a role. Just submit a ServiceNow support ticket if you need help.

Login using login.iowa.gov

How to find the Media Library

You can easily find the media library by hovering over Content in the top left corner, then over Media, and select Media library.

How to find the media library example
2

How to find the Media Library

You can easily find the media library by hovering over Content in the top left corner, then over Media, and select Media library.

How to find the media library example
3

Create a new media library item of type "Google Calendar"

The Google Calendar may be embedded into either an existing Basic Page or in its own page.

As an example, here is a sample Google Calendar (Public URL to the calendar): 

https://calendar.google.com/calendar/embed?src=ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com&ctz=America%2FDetroit

Public link direct to a calendar