Applying CSS to Google Calendar Embedded in an iframe

On a Drupal  site I am developing, I wanted to embed a Google calendar agenda view into a sidebar block. There are no reliable modules that do this for version 7, so I just used Google’s method. They make this quite simple all you do is visit your calendar page click on the little down arrow on a public calendar and select settings. Google gives you the embed code right on the setting page, they even allow you to customize the view.

So I embedded an agenda view of a calendar in the sidebar, but discovered that the event titles just ran off the side of the sidebar, they didn’t wrap. This made it really hard to read the calendar. It turns out that Google sets a CSS property “white-space” to “no-wrap.” Using Firebug in Firefox, I set the property to “normal” and the titles wrapped the way the should.  The problem is that you can’t apply CSS to content in an iframe from another domain.

Searching the web I found one solution: Customising an embedded google calendar, that looked promising. Basically use wget to capture the page that is returned in the embeded code and host that on your site, then you point the link in the embedded code to your saved page instead of Google. After following instructions I could get the calendar to show up, but it wasn’t importing any events. Back to searching Google.

Next I found this site: Easy Color Customization for Embedded Google Calendars. Even though it wasn’t exactly what I wanted to do, I knew it must have something to do with manipulating the CSS of the embedded calendar, so maybe I could adapt it to change other CSS properties. What he did was create a custom PHP script that pulls the data from the embedded Google link and allows you to manipulate it before displaying it. Then all you need to do is call the php script in the embed code.

It worked beautifully, but I discovered that the script needs to be in the website root directory or the page tries to download the script instead of running it. Based on the php script, I know I could probably create a custom module for Drupal and integrate the calendar properly, but it isn’t worth the time.

Update:

Oops, I figured out the script doesn’t have to be in the website root, it just has to be in a directory where the .htaccess file doesn’t block scripts from executing.