myspaceGcal

Google Calendar Javascript Solution

2010-03-28T20:26:00.000-07:00

If you have access to your own web page, your embedding options are much more robust. Myspacegcal uses flash due to a restrictions on myspace.

First of all, this feature is built right in to google calendar. Just go to "calendar settings" and look for the "embed this calendar" section.

However, there is definitely a very "google" look to the calendar and it might clash with your overall web design:

My good friend and one of the finest musicians I know, Rob Reich, asked me to help him set up his web site to show his gig calendar in a more integrated way. He was using iCal, but I proposed moving him over the google calendar. Once he did that, I whipped up some javascript to show his calendar from the google feed in plain text, with customizable CSS for each field.

The result is what you see on his web page. He has a 7-day "upcoming shows" preview on the front page and a 30-day calendar page that shows the next 30 days of performances.

Here's how you set this up:

Requirements:

gcal_loader.js (right-click, save as)
calendar.html (right-click, save as)

You will also need your xml feed URL. You can find it by clicking the "xml" button under "Calendar Settings", "Calendar Address".

The URL should look something like this:

http://www.google.com/calendar/feeds/<CALENDAR_ID>/public/basic

Note 8-18-10: it has come to my attention that the "basic" feed doesn't work anymore. Replace "basic" at the end of the URL with "full" to fix this:

http://www.google.com/calendar/feeds/<CALENDAR_ID>/public/full

Directions:

Make sure your google calendar is set to public: "Calendar Settings", "Share This Calendar", Check "Make This Calendar Public" , Save
Open calendar.html in a text editor and go to line 36, which reads: <body onload="loadCalendar('<YOUR_CALENDAR_ADDRESS>', 30)">
Replace <YOUR_CALENDAR_ADDRESS> with your xml feed URL.
Put gcal_loader.js and calendar.html in the same folder on your server.
Now you can visit the URL where you put calendar.html in a web browser and see that it should be showing the next 30 days of shows in a plain text format.
Embed calendar.html anywhere in the html of your site using an iframe. For example, here is the code for a calendar embedded with a width of 90%, height 600 pixels, no border, and transparent background: <iframe width="90%" height="600" allowtransparency="true" frameborder="0" src="calendar.html"></iframe>

Further Customization:

The calendar title can be removed, just delete the line that reads: <div id="calendarTitle"></div> . Or you can move it to another part of the page.

If you want the calendar the show events that occur within a different range than 30 days, change the number at the end of this line on calendar.html:

Notice it's set to "30". Put any number you want there (such as "120" for 120 days, "7" for a week of previews, "365" for a year).

The calendar fields are assigned to CSS classes. If you are familiar with CSS, you can override the page CSS with your own custom styles. These fields are:

.calendar_title

.event_title

.event_time

.event_location

.event_description

You can uncomment lines 5-25 in calendar.html to enable the CSS and experiment with modifying the look and feel of your calendar feed.

Troubleshooting: Check your calendar settings

2009-07-29T12:02:00.001-07:00

Just a couple of things I have discovered as more people started using myspaceGcal.

A.) Your calendar MUST be set to public, otherwise the swf will hang on "Loading..." To do this:

Open your Google calendar https://www.google.com/calendar
Click on "Settings" in the upper right corner
Click on the "Calendars" tab
Under "My Calendars" click on the calendar you want to share
Click "Share this calendar"
Select "Make this calendar public" and save.

B.) Be sure to set your timezone correctly, otherwise your calendar may show incorrect dates and start times.

Open your Google calendar https://www.google.com/calendar
Click on "Settings" in the upper right corner
Click on the "Calendars" tab
Under "My Calendars" click on the calendar you want to modify
Under "Calendar Time Zone", set the timezone to the timezone of your region.

myspaceGcal Launch

2009-06-28T14:14:00.000-07:00

Welcome to myspaceGcal!

MyspaceGcal a free flash script that will allow you to embed your existing Google Calendar into Myspace. This is great for musicians, venues, or artists who would like their events to show up on Myspace, but do not want to maintain multiple calendars.

See the screenshot to the left to see what it looks like.

myspaceGcal features:

Display your events in chronological order
Lists all future events in a scrollable list
Shows the event description when the event title is clicked
Customizable colors
Publishable in myspace and anywhere else that supports embedded .swf files
Link to your full calendar in the title bar or below the flash area

To get started, visit:

http://www.myspacegcal.com

And follow the directions posted there.

Let me know if you find this useful and have any ideas for improvement! Drop me a line at: myspacegcal@gmail.com