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:
<body onload="loadCalendar('<YOUR_CALENDAR_ADDRESS>', 30)">
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.
