HOWTO: Word Wrap Google Calendar Events in the Month View

This page shows how to modify google calendar so that the titles of events wrap when in the month view. After testing some different ways of doing this, I think that there is only really one good way of doing this. It involves changing google's code so most people run up against the cross-domain security protections built into brosers. To get around that, you need to load the calendar from your domain and then modify the code on the fly before you send it to the browser.

The trick to loading a google calendar from your site is to use Apache's modrewrite and modproxy modules. The following code is used to be able to load google calendar from your own domain.

<VirtualHost *:80>
    ServerName example.com
    DocumentRoot /var/www/site



DirectoryIndex index.htm index.stm index.php

RewriteEngine On

RewriteRule ^calendar/(.*\.css)$ http://example.com/gcal.php?url=$1 [P]
RewriteRule ^calendar/(.*) http://www.google.com/calendar/$1 [P]




</Virtualhost>

When you make this change, you need to restart apache. It's also a good idea to clear your browser's cache when testing. If you need to enable the mods in apache2, use these commands 

a2enmod proxy_http
a2enmod rewrite

If you don't have access to the apache's config, you can still setup the rewrite engine in .htaccess. When I set it up here (maybe on a different version of apache) I had to remove the first / in order to get this to work. 

RewriteEngine On



RewriteRule ^calendar/(..css)$ http://example.com/gcal.php?url=$1 [P]
RewriteRule ^calendar/(.) http://www.google.com/calendar/$1 [P]

Once you get to this point, you can test to see if your calendar loads from your domain. Just grab the src out of the iframe tag supplied by google and substitude your own domain name. If it doesn't work, you either are running on a version of apache without modrewrite or modproxy, of you may just need to play with the configuration. The P flag is important so that it is actually loaded from your domain. That tells modrewrite to pass the request to modproxy. Not all webhosts support mod_proxy. Dreamhost doesn't for example.

Test Calendar to make sure it loads from your domain

If that test works, then you're ready to make the modification to the css.

 .te {
-    white-space: nowrap;
+    white-space: normal;
 }

I think the best way to modify the css, is to send it to a script that can use regular expressions to just swap out the value. This way the modification is less subject to error when google re-releases it's calendar and css (which does happen). Here's the gcal.php.

The DOM Inspector is what allowed me to find things that I want to change.

Lastly, if you like what I've done, consider making a donation to me via paypal at goobsoft at goobsoft.com. And now here is an example.