Linden LAN » PHP

Hyphenation!

Admin — Sat, 14 Nov 2009 05:04:43 +0000

Do you like typography? Are you tired of ragged right text? Do you have a WordPress blog? Go here now! wp-Typography is the merger of wp-Typogrify and, more importantly, wp-Hyphenate. I do LaTeX typesetting, and as a result, I’ve acquired an appreciation for properly formatted text. If you ever tried using the CSS property text-align, you inevitably are disappointed with the results because it resembles nothing like what LaTeX can produce. You often have to make your text eye-jarringly wide to make it useable, and that doesn’t always work. This is because the browser lacks built-in support for hyphenation. This plugin makes up for this browser deficiency by inserting hyphenation hints, known as soft-hyphens, which the browser does understand. The algorithm is based on the one used in TeX to boot! Brilliant!

How To Simultaneously Add Multiple Products To A Magento Shopping Cart

Brian — Mon, 28 Sep 2009 02:01:38 +0000

This post is a bit overdue considering the project for which I did this was completed months ago. I finally got around to documenting it. Magento’s product list view lets customers add products to the shopping cart one at a time. The client wanted customers to be able to add multiple products to the shopping cart simultaneously. Given the time constraints for the projects, I created an ad hoc AJAX method to accomplish this feature request.

Adding a product to a Magento (ver. 1.3.1) shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is output by the template helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.



isGrouped()): ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

At the bottom of the list I added a submit button.

Processing... getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/>

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the processing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

That’s it. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

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!

How To Fake a Magento Subpage

Admin — Tue, 21 Apr 2009 14:52:50 +0000

Magento, an open-source PHP ecommerce solution, has a very comprehensive feature list. However, its built-in CMS doesn’t support hierarchical pages. You can fake it, though.

Let’s say you have a page with an SEF (search engine friendly) URL Identifier of “foo”. You’d like to have a subpage “bar” nested under foo. The CMS doesn’t let you create parent-child relationships, but Magento will let you include forward slashes in the SEF URL Identifier so that it is “foo/bar”.

That’s the good news. The bad news is if you want to use the breadcrumbs block, it won’t work out of the box. The Magento CMS is flat, so the default breadcrumbs will always look like “Home / My Page Title.” The optimal solution is to override the breadcrumbs module and parse the SEF URL Identifier and construct the breadcrumbs from that. (I may write a post about it in the future so stay tuned.) The good news for those designers out there, you don’t have to dive into code.

Magento’s CMS has a feature where each page has a way to override its XML layout. When you’re editing a page, go to the “Custom Design” tab. There you’ll see a form field called “Layout Update XML”. This is the key. Here’s where you add XML to first unset the breadcrumbs block and then add it back in but with your specific breadcrumbs. Here’s the code:


breadcrumbs




    
        home
        HomeGo to Home Page/
                 
    
        foo
        FooFoo/foo/
                 
    
        cms_page
        BarBar

The first reference tells Magento to call the unset action on the root block to remove the original breadcrumbs. The second reference tells Magento to add a new breadcrumbs block. Then within that block it tells Magento to add three new breadcrumbs, one for “home”, one for “foo”, and another for “bar”. crumbName is just a unique identifier. Under crumbInfo, label is the link text, title is the hover text, and link is the URL. You need to include the root forward slash. The trailing slash is optional, but to be consistent with Magento you should include it.

And that’s all there is to it. If you have a Magento site with lots of CMS subpages or pages that are deeply nested, then this method can get tedious. That’s why I said the optimal solution is to override the breadcrumbs module in core as a local modification. If you don’t have many CMS subpages and they’re only one-level deep, then this method is adequate.

It’s Tax(onomy) Season

Brian — Tue, 10 Mar 2009 16:51:33 +0000

Drupal has a Taxonomy module for categorizing content. The module can generate a select box based on the defined taxonomy. However, it does not support option groups. I figured I’d share my modification for those who’d like to do the same. It was based on code from a Drupal forum post which I think was based on Drupal 5, not 6.

The code that needs to be modified is from _taxonomy_term_select() in modules/taxonomy/taxonomy.module, after line 1032.

function _taxonomy_term_select($title, $name, $value, $vocabulary_id, $description, $multiple, $blank, $exclude = array()) {
  $tree = taxonomy_get_tree($vocabulary_id);
  $options = array();

  if ($blank) {
    $options[''] = $blank;
  }
  if ($tree) {
    $curr_group = '';
    foreach ($tree as $term) {
      if (!in_array($term->tid, $exclude)) {
        if($term->parents[0] == 0) {
          $curr_group=$term->name;
          $options[$curr_group] = array();        
        }
        else {
          $choice = new stdClass();
          $choice->option = array($term->tid => str_repeat('-', $term->depth) . $term->name);
          $options[$curr_group][] = $choice;
        }
      }
    }
  }

  return array('#type' => 'select',
    '#title' => $title,
    '#default_value' => $value,
    '#options' => $options,
    '#description' => $description,
    '#multiple' => $multiple,
    '#size' => $multiple ? min(9, count($options)) : 0,
    '#weight' => -15,
    '#theme' => 'taxonomy_term_select',
  );
}

Essentially, the code simply iterates through the tree like the original code, except when it encounters a root node it creates a new key with an array value to contain the individual options, thereby creating an option group using the term’s name as its label. The code isn’t very flexible since it won’t account for root nodes with no children. Also it doesn’t account for options with a depth greater than 1, in which case you’d probably want to set a class and disabled attribute to make it look and act like an option group (since option groups can’t be nested). Such a change would also involve modifying form_select_options() in includes/form.inc since attributes for option tags is not supported.

No PHP For You!

Brian — Sun, 14 Dec 2008 21:56:49 +0000

On Ubuntu 8.10, I ran into a bit of problem. The Apache web server was working fine, but the following commands:

sudo apt-get install php5 libapache-mod-php5
sudo /etc/init.d/apache2 restart

failed to work after creating a phpinfo.php file in the /var/www/ root folder. Firefox complained, “You have chosen to open phpinfo.php which is a: PHP file.” Apache was not using the PHP preprocessor for some reason. A bunch of forum posts and blogs said to edit either /etc/apache2/httpd.conf or /etc/apache2/apache2.conf in order to associate the PHP mime type with the file extension. That wouldn’t work because I had also installed phpmyadmin which has an apache.conf file that already has an AddType directive. So, after some digging around, it turns out the module wasn’t even being loaded, even though that’s what you’d expect the package manager to handle when you tell it to install the module. Any how, to fix the problem, just create symbolic links to the php5.load and php5.conf files in the /etc/apache2/mods-enabled/ folder.

sudo ln -s /etc/apache2/mods-available/php5.load /etc/apache2/mods-enabled/php5.load
sudo ln -s /etc/apache2/mods-available/php5.conf /etc/apache2/mods-enabled/php5.conf
sudo /etc/init.d/apache2 restart

Update: Debian-based installs of Apache2 have some handy command line utils for managing the web server. So to enable a mod, which automates the above, do this instead:

sudo a2enmod php5

a2dismod is the command for disabling a mod. For sites, there is also a2ensite and a2dissite.

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.

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.