MosaicGlobe - Your free artist portfolio website, blog and art directory

Google Calendars and MosaicGlobe

A while back we recommended creating a GoogleApps account to manage your email. Particularly if you were forwarding a domain to your MosaicGlobe website. Google Apps is a suite of powerful online applications  that are easy to set up and free to use. Google Apps includes Google Calendar, Google Docs, Gmail and more. Read the last article [Adding Email and Domain Names to your MosaicGlobe website] to  learn more about setting up an account.

In this article we're going to discuss embedding a Google Calendar to your site. We've created a sample calendar [ Artist Birthdays ]  for reference.

Create your Calendar
Log into your GoogleApps account and navigate to the Calendar area. Here you will see your main calendar for your account. For this example we are going to add a new calendar called "Artist Birthdays".

On the left side of your calendar is an area called 'My calendars'. Click the 'Create' link at the bottom right of this section.

In the Create New Calendar area give your calendar a title and hit the 'Create Calendar' button. Now you can start adding all those important dates that you want to share.

Create your MosaicGlobe Calendar page.
Log into you MosaicGlobe website and in the 'Manage Site' section - Add a new page: Standard Page. We'll of course call our page "Artist Birthdays". Add some copy in and save when your ready.

Google and MosaicGlobe :)
Now this part may be a bit tricky for some of you. We want to embed your Google calendar into the MosaicGlobe website you just created. To do this your going to need to look at HTML code and perhaps make a quick modification. Don't worry, it'll be easy.

Let's first get the code from Google. Go back to your calendar page. In the 'My calendars' sidebar select 'Share this calendar' from the drop down of the calendar you want to share. Then check 'Share this calendar with others' and 'Make this calendar public'. Next select 'See all event details' from the drop down menu and click save.

Now from the sidebar drop down again, select 'Calendar settings'. Here you will find a section called 'Embed This Calendar'. Click on the 'Customize the color, size, and other options' link.

There are a number of options you can play with, but for now let's change the width to 600 pixels and the height to 500 pixels.

Now select all the HTML at the top of the page and copy it Edit/Copy (Ctrl-C) (or mac: Cmd-C). Now edit your MosaicGlobe page again. This time lets click on the HTML view (< >) to paste our code in. Click the icon and place your cursor after any text that may be on the page. Then paste the code Edit/Paste  (Ctrl-V) (or mac: Cmd-V).

Now you should see your code in the text editor and we can make one minor edit. We need to add an 'http:' just before the URL (I have no idea why it not there in the first place?).

At the beginning of the code block you will see this:

<iframe src="//www.google.com/...

We need to add 'http:' in so it reads:

<iframe src="http://www.google.com/...

Twitter    Facebook    RSS Feed    Subscribe    Share/Bookmark

There are 2 Comments for Article: Adding a Calendar to your Website

Add A Comment

Name:

Email:

URL:

Message:

Performing Spam Check