Santa Clara University

Web Publishing @ SCU

Google Calendar and Drive Documents

You can embed a Google Calendar or Google Drive Documents 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 Forms
You can embed a Google Drive Form in a similar manner. Look for the "Embed Form in a Web Page..." option in the Spreadsheet/Form menu, and copy the html code provided. Add a Simple Text Block element to your  Commonspot page and paste the code copied from Google Drive. The embed code includes height and width attributes. You can modify those to fit the form in your web page.
Google Charts

Similarly, you'll use the Commonspot Simple Text Block element to include the html code for a Google 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