Linden LAN » Google

MyGoogleCal is now RESTYLEgc

Admin — Mon, 06 Jul 2009 16:24:40 +0000

I finally got around to spinning off MyGoogleCal as a separate website. I opted to rename the script to RESTYLEgc to avoid stepping on Google’s toes. It was something that’s been gestating over the past year. I completed the site over the holiday weekend since I had the time available. The new site is at www.restylegc.com. I’m also hosting the script at Google Code, and I even added a Google Group to facilitate discussions. After seeing the comments top 100, I realize a blog really isn’t suitable for lengthy discussions. Hopefully, the forum and wiki features will be better for the end-user.

I updated MyGoogleCal4 with a small bugfix this weekend as well. That will be the last update. Future development will continue with RESTYLEgc. Since the code was originally public domain, I opted to go with an MIT open source license. I also got the code in a Subversion repository which I should’ve done a long time ago. With the Issues tab at Google Code, I can better track and encourage bug reports and feature requests.

The code is still free, but paid support is available. I’ve also got some other ideas of where I want to take the site. So stay tuned!

Restyle Google Calendar 4

Brian — Thu, 04 Dec 2008 07:00:55 +0000

As a few users of MyGoogleCal3 have already pointed out, the script no longer works properly. That’s the bad news. The good news is version 4 does work. In fact, with the latest changes Google made to their code, ALL the features that were broken in 3 appear to be working now—Agenda/Week view, the calendar navigation buttons, and IE is fixed. Please download and test out the latest version, and report any bugs in the comments and I’ll try to resolve them as time allows.

UPDATE (2009 July 5): MyGoogleCal is now RESTYLEgc.

UPDATE (2009 June 23): Google’s recent update broke the jQuery injection. In fact, the update is incompatible with injecting jQuery, Prototype, and MooTools. The only JavaScript framework that works is Dojo. I updated the code to inject that framework instead. For those people who value stability over having the latest and greatest features, I also added a comment to MyGoogleCal4js.php that explains how to freeze the calendar version. That should hopefully help all you fellow developers who tire of your clients calling you when their calendar breaks.

UPDATE (2009 May 3): MyGoogleCal4 now supports jQuery manipulation of the DOM. This gives the ability to apply styles after page load. As an example, the default code removes the inline style on the body tag allowing the stylesheet to set the background color. The default code also removes the width property from the inline style of the bubble class so that its width can be set in the stylesheet as well. This should help overcome many of the problems that can’t be solved directly using a stylesheet. You can thank TechTriad.com for funding this new feature.

Download: mygooglecal4.zip. Contains MyGoogleCal4.php, MyGoogleCal4js.php, mygooglecal4.css, and images. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google. phpinfo.php is used for diagnostic purposes to make sure your PHP installation is working and that it has the required plugins. In the archive folder, you can find previous versions of Google’s Javascript and CSS files, in case you want to use those (see MyGoogleCal4js.php).

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal4.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/()/';
$replacement = '';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal4js.php?$1"';  
$buffer = preg_replace($pattern, $replacement, $buffer);

// Add a hook to the window onload function
$pattern = '/}\);}<\/script>/';
$replacement = '}); myGoogleCal();}';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Use DHTML to modify the DOM after the calendar loads
$pattern = '/(<\/head>)/';
$replacement = <<


MGC;
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

?>

If you look at lines 39–41 in MyGoogleCal4js.php, you’ll see how simple the fix is. No more XmlHttpRequest bugs. Thank you, Google.

 0) {
  $url = "http://www.google.com/calendar/" . $_SERVER['QUERY_STRING'];
}

/* If you would like to freeze the calendar version, download the Javascript
 * file using the same method for downloading the CSS file, as described in
 * the main script.  You can find some previous versions in the archive folder.
 * NOTE: You should use the corresponding CSS file as well.
 *
 * Edit and uncomment the following line to freeze the calendar version.
 */
//$url = "http://myserver.tld/path/to/archive/6a3eb8ba4a07edb76f79a18d6bdb8933embedcompiled__en.js";

// Request the javascript
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Fix URLs in the javascript
$pattern = '/this\.[a-zA-Z]{2}\+"calendar/';
$replacement = '"http://www.google.com/calendar';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Display the javascript
print $buffer;
?>

The installation of MyGoogleCal4 is the same as the installation for MyGoogleCal2 except you download the zip file above. You can ignore step 3 regarding the .htaccess file. As far as I can tell, it’s no longer needed.

Restyle Google Calendar 3

Brian — Thu, 24 Apr 2008 05:46:09 +0000

MyGoogleCal2 no longer works 100% in Internet Explorer. A runtime error occurs when navigating month-to-month or when switching to Agenda mode. The workaround is to simply hide the navigation interface. Now, I don’t know if this bug was introduced when Google updated the code last month, or if it’s always been there and I just never noticed. In any case, the runtime error occurs when //"+a.host+"/calendar is replaced by //www.google.com/calendar. Given the poor debugging available in IE, I didn’t get very far with figuring out why IE breaks. I suspect that when IE makes an XmlHttpRequest, it’s double checking that the request URL matches up with the server host, or something to that effect. Since Google obfuscates the Javascript code, it’s just way too hard to try and fix it. Instead, I’ve opted to create a new version of MyGoogleCal that uses the original technique for IE but uses the technique from MyGoogleCal2 for all other browsers.

UPDATE: MyGoogleCal now has a fourth version.

Download: mygooglecal3.zip. Contains MyGoogleCal3.php, MyGoogleCal3js.php, mygooglecal3.css, mygooglecal3ie.css, and an .htaccess file. The CSS files are not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal3.css';

/* For the IE stylesheet replace "embed" with "htmlembed" in step (1) 
 */
$stylesheet_ie = 'mygooglecal3ie.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
$is_ie = FALSE;
if(count($_GET) > 0) {
  if(stristr($_SERVER['HTTP_USER_AGENT'], 'msie') === FALSE) {
    $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
  } else {
    $url = "http://www.google.com/calendar/htmlembed?" . $_SERVER['QUERY_STRING'];
    $is_ie = TRUE;
  }
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

if($is_ie) {
  // Fix hrefs, image sources, and stylesheet
  $pattern = '/(href="render)/';
  $replacement = 'href="http://www.google.com/calendar/render';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(href="event)/';
  $replacement = 'href="http://www.google.com/calendar/event';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(http:\/\/www.google.com\/calendar\/htmlembed)/';
  $replacement = 'MyGoogleCal3.php';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(src="images)/';
  $replacement = 'src="http://www.google.com/calendar/images';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/()/';
  $replacement = '';
  $buffer = preg_replace($pattern, $replacement, $buffer);
} else {
  // Point stylesheet and javascript to custom versions
  $pattern = '/()/';
  $replacement = '';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/src="(.*js)"/';
  $replacement = 'src="MyGoogleCal3js.php?$1"';
  $buffer = preg_replace($pattern, $replacement, $buffer);
}

// display the calendar
print $buffer;
?>

The installation of MyGoogleCal3 is more or less the same as the installation for MyGoogleCal2 except you download the zip file above. Also MyGoogleCal3 uses two stylesheets, one for IE and one for all the other browsers.

There is a minor bug. Despite changing the URL from ../images/ext/poweredby.png to images/poweredby.png in the IE CSS file, this does not make the Powered by Google logo appear in the lower right. I think that’s OK since it doesn’t appear on Google’s site either.

Update (21 Jun 2008): Google changed the JavaScript once again and this time very radically. I’ve been keeping snapshots of their JavaScript code, so I’ve changed the script to load an older customized .js file. This is a quick fix.

How To Install MyGoogleCal2.php

Brian — Sun, 23 Mar 2008 05:12:37 +0000

One of my readers asked for a step-by-step set of instructions to install MyGoogleCal2.php. My original posts for restyling Google Calendar did assume a certain level of expertise. This should hopefully help those who are still confused.

Download mygooglecal2.zip.
Unzip the file on your server, typically into a subfolder named ‘mygooglecal’.
If your web server supports .htaccess files and your site does not already have one, just move the .htaccess file that was in the zip file to the root of your site. If your web site already has an .htaccess file, then you will need to copy the mod_rewrite rules from the the zip file’s .htaccess file to the existing one.
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.
The HTML code for the Google Calendar is an tag. You need to edit the src attribute to point to MyGoogleCal2.php on your server and not http://www.google.com/calendar/embed. See ‘USAGE:’ in the MyGoogleCal2.php file for an example.
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 MyGoogleCal2.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 MyGoogleCal2.php.

Some additional notes:

Some of the colors that the Google Calendar uses are: #c3d9ff, #bcd, #cde, #e8eef7, #e5ecf9, and #112abb. That should help when editing the CSS file. I highly recommend using Firefox and the Firebug extension. The extension has an Inspect feature that let’s you select a DOM object and see its element ID, class, and style attributes. That will help identify which CSS rule you need change.
If the display of the calendar is blank, that usually means your PHP configuration is wrong and most likely the curl module is not installed or disabled. Open the phpinfo.php file included in the zip file. This will list a bunch of debug information about your web server’s PHP configuration. If you do not see curl listed or curl is listed but disabled, then you will need to talk to your system administrator to fix it.

Calendar Casting Call

Brian — Fri, 11 Jan 2008 02:51:24 +0000

Did you restyle your embedded Google Calendar using MyGoogleCal? Maybe you’ve restyled Google Calendar Gadget by following my instructions to modify the XML configuration? Do you want to show off how you integrated your calendar into your site? Just leave a URL comment with a link to your web site.

Restyle Google Calendar 2

Brian — Mon, 15 Oct 2007 04:38:54 +0000

The long awaited new version of MyGoogleCal is here. It supports the new AJAX-enabled Javascript method Google switched to last month. As a bonus, the new version has native support for multiple calendars each with their own colors! Other changes to the code include officially switching from fopen to curl to retrieve the data. Furthermore, the code replaces much less HTML since it’s encapsulated in Javascript. Without further ado…

UPDATE: MyGoogleCal now has a third version.

Download: mygooglecal2.zip. Contains MyGoogleCal2.php, mygooglecal2.css, MyGoogleCal2js.php, and an .htaccess file. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *     tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that's more easily editable.
 */
$stylesheet = 'mygooglecal2.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/()/';
$replacement = '';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal2js.php?$1"';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

Use is similar to the original MyGoogleCal.php. To help create the , you can use the Embeddable Calendar Helper. Just remember to update the src attribute to point to MyGoogleCal2.php and not http://www.google.com/calendar/embed.

In addition to a custom CSS file the script makes use of a custom Javascript file. Each URL is set after the script’s header and includes instructions on how to download versions of these files from Google. This is important since it appears that the Javascript file is localized. (I included copies that I downloaded in the above Zip file.)

Update (22 Mar 08): I created a new PHP file, MyGoogleCal2js.php, which downloads the JavaScript code and edits the code on-the-fly. This negates the need to maintain a customized version of the JavaScript code on the same server as the MyGoogleCal.php script. This should also lessen the chance that MyGoogleCal2.php will break when Google updates the code as long as the changes are minor.

The UI images are no longer contained in the CSS file. You have two options on how to handle this. If your site runs off of Apache, you can create a rewrite rule to hotlink to the Google images. (I included an .htaccess file in the Zip file above that has a sample rule.) The other, more conventional option is to create an “images” subfolder where the script is located and place copies of these images there. You will definitely have to do this if you want to replace those images with customized versions. (I included images in the Zip file.)

What I’m hung-up on right now is figuring out a way to not have to save and rewrite the Javascript file. The Javascript file is responsible for drawing the calendar, retrieving the XML data from Google, and then putting that data into the calendar. The _init() function dynamically creates the URL from which to retrieve the XML data by using the browser’s window.location.host property. Since the browser will presumably be pointing to your site, the host property will not be www.google.com. As a result, the Javascript hangs at the XML loading stage fails to retrieve data when navigating into the future or past. My attempts at circumventing this problem has been met with little success.

I tried the passthru directive in .htaccess file like so:

RewriteRule ^(calendar/feeds/.*)$ http://www.google.com/$1 [P]

The browser spits out a 502 error.

A redirect, [R] instead of [P], only works half-way. The XmlHttpRequest goes thru but the data is rejected because it’s considered insecure since you can’t load data retrieved from an external domain.

I also tried ProxyPass/ProxyPassReverse to map

/calendar/


http://www.google.com/calendar

but it simply results in an error. I’ll have to consult with my host to figure if the error is the configuration on their end or mine.

Update (03 Jan 08): After talking with my hosting provider it turns out this error is the fault of my virtual server and it won’t be fixed since they’re retiring the hardware. I’ve been placed in the queue to migrate my account over to a new (hopefully problem-free) server. In any case, I’ll definitely revisit this solution after the migration is over and test it then.

For more info, checkout: Fixing AJAX: XMLHttpRequest Considered Harmful or Use a Web Proxy for Cross-Domain XMLHttpRequest Calls. The last one has pretty pictures.

Failed experiments include:

Use the Javascript prototype mechanism to somehow override the window.location.host property to return a string of my choosing.
Rewrite a request to www.google.com to point to MyGoogleCal2.php so that I could inject code into the calendar page. I thought this had a lot promise up until the point I realized I couldn’t put an .htaccess file at google.com. This was one of those “Duh!” moments.
Manipulate the DOM in order to change its document.styleSheets property directly. Due to security reasons, you can’t modify, let alone read, the DOM properties across different domains.
Proxy the XmlHttpRequest thru a curl script. This almost worked. The curl request succeeded in getting the JSON data, but for whatever reason, the Javascript code failed to do anything with it. Depending on the content-type requested for the response, either nothing happening or the browser would spit out a Javascript error. I’m sure it had to with an incomplete request header or returning just the response data instead of the entire response. But whatever reason it was, this solution seemed more trouble than it was worth.

Update (29 Oct 07): Google’s new version of the Javascript code does not require any customization. Do you suppose some Google developer read my post? However, a side-effect is that imported calendars do not work. I’m betting it has to do with XmlHttpRequest permissions, but I won’t know for certain without further investigation.

When you’re done restyling your calendar, show it off! Oh and don’t forget to Digg the article.

How To Add A Meetup Calendar To Google Calendar

Brian — Tue, 07 Aug 2007 05:13:29 +0000

I stumbled upon Meetup.com while looking for some local groups that matched my interests. I noticed that each group has its own calendar. Since I hack Google Calendar, I was wondering how to get a Meetup calendar on Google Calendar, rather than manually adding events by hand. Here’s how…

Login into Google Calendar
On the left hand side, under My Calendars, click Add and a drop down menu should appear
Click Add by URL
In a new tab/window, go to a Meetup group
Click on Calendar
Scroll to the bottom of the page, until you see Subscribe
Right click the iCal link and select Copy Link Location if you use Firefox (a similar option should be available for other browsers)
Go back to the Google Calendar tab/window
Paste the link in the Public Calendar Address field and click the Add button
Click OK to return to your Google Calendar

If all goes well, the events from the Meetup group should appear on your calendar after a short while. It takes time for Google Calendar to load the remote calendar. This will work for any iCal address you find on the web.

Restyle Google Calendar Gadget

Brian — Tue, 19 Jun 2007 00:16:34 +0000

My how-to for restyling Google Calendar is by far this blog’s most popular post so far. Right from the start, people had requested that I adjust the code to accommodate Google Calendar’s mini-mode. It certainly was possible using the technique I used, but it did break the agenda which was flaky to begin with given the fact the feature was experimental. Every once in a while, I’d check on the stability of mini-mode to determine if it was ripe for some hacking. Then one day the mode simply didn’t work anymore. It was weird, but after further research I found out why. Mini-mode was superseded by the Google Calendar Gadget. The configuration form does provide some customization of the style, but it is certainly limited. So just like before, I poked and prodded the code until I was able to find the means to restyle the gadget.

First step is to go to the Google Calendar Gadget page. Click on the “Add to Your Webpage” button. The reason I don’t provide a direct link is because clicking on the button appears to set some locale settings. Once there you can roughly style the calendar the way you want—like the overall size, what border, whether you want to display the calendar, agenda, or both, which calendar(s) you want to load, the link color for each event (which can be different for each calendar), etc. Note that the calendar URL that you want to use is the XML one. You get the URL by going to your Google Calendar, click on “Manage Calendars,” click the specific calendar, and then clicking the XML button under “Calendar Address.” Just copy and paste the address into the form. After you are done previewing the calendar, you’ll want to click the “Get the Code” button which will generate a script block that will be the foundation on which we’ll build.

Let’s dissect the generated HTML.

Some more settings. You can have a blank title if you want. This is also where the border is defined. Again you can have a blank border or you can be very fancy with your border design as long as it’s valid URL encoded CSS. You can also tweak the width and height if the need arises.

The next step is download the source code for the gadget. (You can select “File->Save Page As” in Firefox if you load the source code in the browser.) This way we now have a copy of the gadget that we can modify. Open up the XML file in your favorite editor. Scroll down until you find the style block. This is where most of the style changes can be made. Anywhere you see #c3d9ff or rgb(195, 217, 255) is Google blue. Most of the class selectors are self-explanatory. The one style that’s not in the style block that you may wish to change is the one contained in the table with the id pickerContainer__MODULE_ID__. This is the color for the “Loading…” splash.

The last step is to change the script block that loads the gadget. Instead of