Google calendar is free, powerful and cloud-based, making it a good budget choice for clients needing a calendar solution.

However, there are some issues with it that require outside coding to handle:

1. The embedded version is impossible to style, because it’s in an iframe;
2. The RSS feed is fairly opaque to work with, because much of the desired data is in custom Google namespaces, the feed address is full of variables, and the feed doesn’t account for time zones very well.

Here is an example of how to deal with both of those problems. The given examples are for PHP, but the concept and much of the code could easily be translated into .NET.

STYLE THE EMBEDDED CALENDAR

While Google provides some styling options for the embedded version of the calendar, they aren’t great, and consist entirely of variables encoded into the iframe src code. Unless your needs are *very* simple, I wouldn’t bother.

Width and height: Change the iframe “width” attribute to “100%”, rather than declaring a set width. That will ensure the calendar fills whatever div you put the iframe in. You can do the same for height, if you wish.

For real styling changes, though, you’ll need a code solution. In PHP, a useful script is ReStyleGC.

Installation

1. Download the script folder, and unzip it on to your server.
2. Get the embed code for your Google Calendar. It will look something like this:

       <iframe width="320" scrolling="no" height="240" frameborder="0" style=" border-width:0" src="http://www.google.com/calendar/embed?showTabs=0&height=240&wkst=1&bgcolor=%23FFFFFF&src=CalendarID%40group.calendar.google.com&color=%230D7813&ctz=America%2FDenver">

3. Change the red portion of the “src” attribute to point to the RestyleGC script instead, keeping all the other variables:

<iframe width="100%" scrolling="no" height="240" frameborder="0" style=" border-width:0" src="/restylegc-1.0/restylegc.php?showTabs=0&height=240&wkst=1&bgcolor=%23FFFFFF&src=CalendarID%40group.calendar.google.com&color=%230D7813&ctz=America%2FDenver">

How it works: You tell it the calendar feed to get. It grabs the feed, replaces Google’s stylesheet call with a local copy, then uses jQuery to replace the iframe contents.

Usage

You can now make any changes you want to the local CSS file. By default, it’s called “restylegc.css” and lives in the restylegc folder.

Here’s an example of a calendar styled with RestyleGC:

FORMAT THE CALENDAR RSS FEED

Installation

1. Get a copy of parsecalendar.php by James Cridland.
2. Edit it to add your specific details.
3. Functionalize it by making the changes listed in “UPGRADING THE PARSER” below.
4. Upload it to the server, and include it in your page header.

Editing parsecalendar.php

There’s a configuration block at the top of the file, where you specify the feed you want to parse, the date format, your timezone, number of items to show, etc.

On line 46 or so is the actual HTML of each listing, with data variables set off by ‘###’. Configure this any way you want.

Note that some of the choices will change if you choose UPGRADING THE PARSER, below. So do that first.

Upgrading the parser

Parsecalendar.php assumes you’ll copy the code straight into your page. But if you want to use the same code to display multiple feeds, or display them on multiple pages, you need to turn it into a function that you can call as needed. Here’s how:

1. Do an include to bring parsecalendar.php into the page, i.e.:

 include($_SERVER['DOCUMENT_ROOT'].'/parsecalendar.php');

1. Wrap the entire file in a function:

function parse_calendar($calendar,$number_of_items) {
 **existing parsecalendar.php code
}

1. On line 57 or so, replace this line:

$items_to_show=999;

With this:

$items_to_show=$number_of_items;

1. To handle multiple calendars, replace this code on line 35:

if (!isset($calendarfeed)) {$calendarfeed = "https://www.google.com/calendar/feeds/cridland.net_9nfm5orp01h05bnhtd0j0og5g0%40group.calendar.google.com/private-239a285fcf327d9ba6b1f20712498a6a/basic"; }

With a switch statement that can be used for multiple calendars:

$calendar = strtolower($calendar);

switch($calendar) {
    case 'calendarname1':
        $calendarfeed = "CALENDAR FEED1";
    break;
    case 'calendarname2':
        $calendarfeed = "CALENDAR FEED2";
    break;
    case default:
        $calendarfeed="DEFAULT CALENDAR FEED";
    break;
}

In the switch statement, list a case for each calendar name, and provide the Google feed for the associated calendar.

USAGE

Generate a listing using the following code:

$CALENDAR_LISTING_NAME = parse_calendar('CALENDAR_NAME', NUMBER OF EVENTS TO SHOW);

CALENDAR_LISTING_NAME can be whatever you want.

CALENDAR_NAME is the name of the calendar you want to parse, as entered in the switch statement under Upgrading the parser.

NUMBER OF EVENTS TO SHOW is exactly what it says. If you want to display every item in the feed, set the number to 999.

So a live version might look like this:

$news_listing = parse_calendar('news', 5);

This grabs the next 5 events from the calendar you identified as “news” in the switch statement, and writes them into $news_listing.

To display the feed, just echo the listing wherever you want it:

echo $news_listing;

That’s it!