RESTYLEgc

Introduction

RESTYLEgc (formerly known as MyGoogleCal)  is a proxy script written in PHP that replaces an embedded Google Calendar’s stylesheet with a user-defined one. The script also injects the jQuery JavaScript framework to allow the user to modify the DOM after the calendar loads.

This allows the user to:

• change colors
• change fonts
• change styles
• have a transparent background
• add/remove DOM elements
• add event listeners

How It Works

1. A user visits your website and loads the page with the iframe that points to the RESTYLEgc file.
2. The file then requests the calendar from Google’s server using the query string provided.
3. Google’s server sends the calendar back to your server.
4. The file then
   1. replaces the stylesheet url with the url for your stylesheet,
   2. replaces all the image links with links to images on your server,
   3. changes the JavaScript url to point to the RESTYLEgc JavaScript file,
   4. and then injects the Dojo Toolkit.
5. The RESTYLEgc file loads in the iframe and the RESTYLEgc JavaScript file requests the Google Calendar JavaScript file from Google’s server.
6. Google’s server sends the calendar JavaScript back to your server.
7. The RESTYLEgc JavaScript file then changes the Google API feeds to request data from Google’s server (instead of your server).
8. The JavaScript builds the calendar, loads the calendar data, and the user then sees the restyled calendar.

Installation

Requirements

• A webserver with PHP installed. Most hosting services provide this.
• PHP’s cURL module must be enabled.

Steps

1. Download RESTYLEgc. Use the link above.

2. Unzip the file on your server, typically into a subfolder named ‘restylegc’.

3. If you have not already done so, go to the Embeddable Calendar Helper and generate the HTML code for the calendar. Place this code into the page that will display the calendar.

4. The HTML code for the Google Calendar is an <iframe> tag. You need to edit the src attribute to point to restylegc.php on your server and not http://www.google.com/calendar/embed. See ‘USAGE:’ in the restylegc.php file for an example.

5. That’s the basic installation. You should be able to edit the included CSS file. If you want to use a different CSS file or move it somewhere else, make sure to update the $stylesheet variable in restylegc.php. Remember, the CSS file is not guaranteed to be up-to-date so you may have to download your own copy. Just follow the directions listed in restylegc.php.

Example

Left is a standard embedded Google Calendar. On the right is the same calendar proxied through RESTYLEgc. The background is transparent as indicated by the orange color at the top. The cerulean blue is replaced by it’s complementary orange color. This is just a short example of the changes that are possible.