Music Teacher's Helper Blog

I have had my Google Calendar display my free/busy information on my studio website for several months now.  This makes it VERY easy for me to tell students, go look at the calendar & you’ll know when I’m absolutely not available.  Then, come to me with suggested times YOU are available and we’ll have skipped a step in “negotiations.”  This makes things MUCH less frustrating to me, and my students can see how valuable my time is.

I previously just used one Google calendar for all of my times I wanted posted (for example: I have the times that my children are in school, but it’s not in my “main” calendar, it’s in my “home” calendar & thus doesn’t display on the website at all).  Now, that MTH syncs my Google Calendar with my studio website (and it seems MOST of the bugs are worked out), I ended up with double appointments showing on my Google Calendar HomePage (I had students listed and then MTH added in appointments).  This quickly got confusing, so I checked to see what I could do to merge the two calendars for display on my website (with no duplication of appointments in either place, but all my business noted – as not every time I’m busy am I teaching).

Google has an answer!  (NOTE: You will have to click on each of the following images to enlarge them & view them properly.)  There is a box on the left-hand side of your Google Calendar that lists the separate Calendars you have created (I have several: Main, Home, Childcare & now Studio).  Click down arrow next to the MTH calendar (which you can re-name whatever you choose – just make sure you re-name it WITHIN MTH).  Choose “Calendar Settings.”  The second tab across the top will say “Share This Calendar.”  1) Click on that and choose to “Make This Calendar Public” and then 2) the sub-choice of “Share only my free/busy information (hide details).”  After 3) saving your changes, you are automatically returned to your main calendar display.  Make sure you “Make This Calendar Public” for any calendar you wish to be able to show on your studio website.  Each time you are returned to the Main Calendar page.

FINALLY, again choose “Calendar Settings” for your MTH calendar and this time stay on the first page.  Part-way down the page will be a line stating “Embed This Calendar.”  You will then “Choose to customize” the calendar (which will open in a separate tab/window).

In the customization window you will have MANY options.  1) Choose which calendars to display. 2) Choose your time zone.  3) Enter a Title for your calendar. 4) Choose what to display.  5) Optimize the pixels for the MTH website – I use 460 width by 1000 height. 6) Click on the “Update HTML” button. 7) Highlight all the HTML & copy it to your clipboard for insertion into your Studio Webpage.  LEAVE this page open, in case you need to re-copy the code!
Once logged into your MTH website, follow their directions for creating a new page (they tell you how MUCH better than I can!).  After the page is created, edit the page.  Click on “Source” at the top left of the editing window.  This will allow you to place HTML code into your webpage.  Paste (CTRL-V) the HTML code you copied from the Google Calendar Customization Page.  Save the page and then View Your Website and see how it looks!  Mine looks like this:

Enjoy!

UPDATE: 8/27/09 – I was using my laptop disconnected from the internet and my MTH Calendar was not displaying when I pulled up my Google Calendar (for which I have offline viewing enabled).  A quick fix, but one you should know about, in the Calendar “Settings” tab, make sure that you have enabled the MTH calendar for viewing offline.  The Google instructions are clear & concise.  Follow them by clicking here.