Linden LAN » Hacking

Spoof The iPad User-Agent And See The “AdLib” Framework In Action

Brian — Thu, 08 Apr 2010 07:19:45 +0000

As reported on Almost Done, Apple apparently has its own iPad-specific web framework, which Jim Hoskins has dubbed AdLib. If you don’t own an iPad, you can still have a look at it by spoofing the user-agent courtesy of LifeHacker.

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

I tried Firefox and Chrome using their respective user-agent switcher plugins, but didn’t get very far. So go into Safari and select Develop->User Agent->Other… Paste in the above string, click OK, and make sure it’s active. Next navigate to iPad User Guide and check it out. Here’s hoping Apple will be releasing it independently or as a part of the SDK. Here’s also hoping it’s iPhone-compatible.

How To Watch Your Cat From Across The Country

Brian — Tue, 29 Dec 2009 03:27:13 +0000

I went to Florida for my Christmas holiday. In order to not stress out the cat too much, the cat stayed home rather than go to a kennel. No professional pet sitter was available where I live. So I opted to create a home surveillance system from hardware I had lying around and free software.

Obtained a dynamic DNS hostname from DynDNS. Even though my IP address doesn’t change all that often, it is dynamic. Therefore, there’s no guarantee that the IP would work. This was an extra precaution I wanted to take. Plus it gave me something easier to remember.

Installed LogMeIn. I did not require any of the features you get in the pay version. This allowed me to start/stop software as needed and manage the pictures captured by the webcam. Other remote admin services would work as well. VNC is a great alternative.

Flashed my router with the Tomato firmware. The WRT54G stock firmware doesn’t let you forward the magic packet to use wake-on-LAN to turn on a computer. Tomato lets you log into the admin interface and send the packet to any MAC address on the LAN side of the network. I did this just in case the power went out and I needed to turn-on the computer again.

I tried out two different webcam servers for Windows, Broadcam and TinCam. Broadcam is much easier to setup and will automatically setup port forwarding if your router supports UPnP, but it is limited to live video. TinCam has a lot more features, but it isn’t as user-friendly and you have to manually open up a port on the router. Both have trial periods, but are fully functional during the trial period. I tried setting up a Linux webcam server, but a lack of GUI or an easy to use config file meant it was faster to use Windows. I did not test any Mac webcam servers since my MacBook was coming with me. I ultimately settled on using TinCam day-to-day because I could schedule it to record a pic every 5 minutes of every hour (e.g., 1:00, 1:05, 1:10, and so on). Furthermore, the date and time of day is used for the filename. TinCam won’t let you capture pictures and run the video server simultaneously. You can run the image server though which updates every 5 seconds. So if you need an image log and live video, neither will work for you.

With the image server, I was able to watch what was on the webcam currently. In order to see the log, I installed Dropbox. Then I configured TinCam to save the captured images in a Dropbox folder. Now I can see a picture log not just on my laptop but also on my iPhone using the Dropbox app. This was VERY convenient. Furthermore, the app overlays the filename so I can see when the pic was taken.

Finally, I installed Skype on the computer with the webcam so I could occasionally talk to the cat. I created an account specifically for this. I configured Skype to auto-answer and maximize when video is initiated. Though I think as comforting as a familiar sound is to a pet, the cat appeared both excited and confused hearing a disembodied voice.

That’s how I mashed up available hardware and software to keep an eye on my cat while I was gone.

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.

Wolf Around the World

Brian — Thu, 28 Feb 2008 05:06:38 +0000

I watch anime. That, Lego blocks, and video games are the three childhood vices I never outgrew. It’s just that my hobbies have matured along with me. I now prefer games that are rated M even though I still enjoy those that are rated E. I now prefer Technic sets over LEGOLAND Space sets. I now prefer anime that deal with mature themes (e.g. Sayonara Zetsubou Sensei, Seirei no Moribito) over those that are juvenile (Pokemon). I wish more animated shows in the US were more like those from Japan.

Most US animated features are just derivatives of live action sitcoms (The Simpsons, Family Guy, etc.) or purposefully aim at a younger audience as a means to market toys. That’s not to say the Japanese don’t do it. You only have to look as far as Bandai and Gundam to see they do it too, but at least some of the series they’ve produced aren’t dumbed down and actually have recognizable (if not Oscar-caliber) character and plot development (Gundam 00, Gundam 0080, etc.). Which is why I applaud Warner Brothers for taking a queue from Japan, when they produced Animaniacs and the more recent DC Comics series. It doesn’t hurt to put some smarts into your shows. Same goes for Pixar. Nickolodeon takes the crown, though, for their epic series Avatar: The Last Airbender. It’s appealing to adults the same reason Harry Potter is; it’s just good old fashioned storytelling. Not since The Mysterious Cities of Gold has Nick had such a great show. To put things in perspective, it was 15 years from when MCoG ended to when Avatar started, and MCoG originally began airing in 1982!

In any case, even though I do prefer smarter, more mature animated features, I do occasionally watch shows that don’t fit in that category. For example, I’ve watched Kanon 2006 and I’m currently watching Clannad and Shakugan no Shana. They have a high level of production. I’m also in the middle of Spice and Wolf (English). It’s something to watch as the winter season winds down and until the spring season starts. It doesn’t hurt that the characterization of the female protagonist appeals to me—sassy and smart. Plus being a wolf goddess and cute, I was inspired to turn her into a Firefox icon—a small piece of functional fanart. It gave me a chance to flex my (meager) Photoshop skills. Those who watch the show will recognize Horo from the ending credits where she’s hugging a giant apple. After making the icon and I can’t help but think that a complete Spice and Wolf Firefox theme would be kind of cool, or perhaps a full Gnome/KDE theme. Maybe someone can take this icon and run with it. The zip file contains .png icons at various sizes and should be compatible with Gnome and KDE. I don’t feel like making an .ico file for Windows. A Photoshop 7.0 file is included. The file can be imported into The GIMP, but you’ll need to adjust the saturation of the top layer to something between 60 and 80 to match the Photoshop setting of 40.

firefox-horo.zip

Enjoy!

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.

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