Embedding a Google Calendar with Sandvox Pro

This topic came up on the Sandvox Yahoo! discussion group (which you can check out in addition to our online Sandvox forum). It was useful so we thought it would be a good idea to expand this and discuss it on the blog here.

You can use Sandvox Pro, via a Raw HTML Page or Raw HTML Pagelet, to embed a Google Calendar in your website.

Calendar on a Page

Assuming you have a Google Calendar set up, you can start by following the instructions here. You will want to click on Customize to set options like the size (Set the width to about 640 or so for a page with no sidebar, or about 440 or less for a page with a sidebar) and additional options such as border color (to match the colors of your Sandvox page design)

Tip: If you want to leave the title blank (so that you can instead use the page title in Sandvox), you may want to just type in a space (" ") in the title field so Google doesn't automatically generate tht title for you.

Here is some code from a sample calendar. (Oddly, perhaps due to a bug of Google's, the URL mentioned in the code you need to copy is malformed. You will need to repair this by inserting http: as shown in red here. Or perhaps Google will have fixed this by the time you read this.)

<iframe src="http://www.google.com/calendar/embed?title=%20&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=8r9m5mlk0ijdnqihdn1r2k609c%40group.calendar.google.com&amp;color=%23B1365F&amp;ctz=America%2FLos_Angeles" style=" border-width:0 " width="700" height="500" frameborder="0" scrolling="no"></iframe>

Calendar on a Pagelet

You can put a small calendar into a Raw HTML pagelet by using "Google Gadgets for your Webpage." A calendar is only one of thousands that you can embed into a Raw HTML pagelet.

The official Google calendar "Gadget" is here although there are many others you can search for from the URL above.

Once you have chosen the Calendar Gadget, click on the 'Add to your webpage" button.

google calendar in sandvoxAt this point you will want to customize the width.  Pagelets in Sandvox are generally less than 200 pixels wide; you may want to make it a bit narrower to work with the margins.  For instance, this screenshot shows a calendar that was 187 pixels wide (with just a simple border) to work well with the "Aqua" design.  We left the title field blank in the gadget creator, so that we could set the title in Sandvox instead.

Decide whether to show the mini-calendar, the agenda, or both.  Be sure to set the height of the gadget to fit the content.

From the Google Gadget page, click "Get the Code", then copy the snippet of HTML to the clipboard.

Pasting into Sandvox

Over in Sandvox, create a Raw HTML page/pagelet, then double-click on the example text to open up the HTML editor window (or choose "Edit Raw HTML…" from the Edit menu.)  Paste in the code you just copied to replace the contents of the window (repairing the URL if necessary, if your code is missing the "http:").

That's it! Now you have a calendar embedded in your website.