Santa Clara University

Web Publishing @ SCU

Google Calendar and Google Docs Charts

You can embed a Google Calendar or Google Docs Chart in a Commonspot page using the Simple Text Block element. The Google Calendar site includes a guide that describes how to get the HTML code you'll need in order to embed your calendar. Copy the HTML code, and add the Simple Text Block (Without Header) element to your page. You'll find that in the Text Elements category in the Element Gallery.  Click the "edit text" link, and paste your copied HTML code into the form.  Submit the change, and you will see the Google Calendar.

example

Note: The default width setting for a Google Calendar is 800px, which is wider than the fixed width of a two or three-column Commonspot page. To display the calendar at this width, you can edit the Page Properties and turn off the display of the left and right columns. Or, you can use Google's custom calendar settings to change the width of the embedded calendar. A width of 600 pixels would fit within a Commonspot page with the left column displayed. In the following example, the calendar has the width set to 600 pixels and the height is 400 pixels.

 
 
Google Charts

Similarly, you'll use the Commonspot Simple Text Block element to include the html code for a Google Docs (or Drive) Chart. You can create a chart for a Google spreadsheet, and then use the chart's Publish menu to generate a static image or an 'interactive' chart that will display future changes applied to the original spreadsheet.

In either case, the Publish form will generate a string of HTML code. Copy that code and paste into the simple text element to display the chart in your page.

 
Printer-friendly format