PVII Page Helpers: Google Calendar Wrapper

Adding a Google Calendar to your web page

Before you open the Google Calendar Wrapper interface, you need to get the embed code from Google. This assumes that you have a valid Google account and an actual calendar.

Getting the Google Calendar Embed Code:

On a computer, open Google Calendar in a browser. You can only get the code to embed in your website from a computer, not the Google Calendar app.

In the top right, click Settings Settings.

On the left side of the screen, click the name of the calendar you want to embed.

In the Integrate calendar section, copy the iframe code displayed.

Under the embed code, click Customize. Choose your options, then copy the HTML code displayed. By default, your embedded calendar will only be visible to people you've shared it with. To allow all visitors to see your calendar, you'll need to make it Public.

Insert a Google Calendar on your page

Right-click on your page where you want the Calendar to appear and choose PVII HTML Toolkit > Google Calendar Wrapper...

The UI will open.

Paste the iframe you copied from Google into the Embed Code box.

Set Styling options and a User Class (if you'd like).

Click OK.

A responsive Google Calendar will appear in your page when the page is viewed in a browser.

Note: The styling options provide by Google are very limited. The light purple background, for instance, cannot be changed. The only real option is to assign a background image. Because the calendar is sandboxed inside an iframe, this must be done on the Google Calendar web site.

We make Dreamweaver better.