A recent client requested a calendar she could use on her website to display events, immediately my thoughts turned to Google calendar. After creating and embedding the Google calendar in an iframe I noticed the style didn’t quite fit with the rest of the site, it looked ok but just didn’t follow suit.
I was surprised to find that adding CSS rules to the parent document didn’t work, even when adding an !important directive to each rule. The reason for this became obvious and actually two-fold;
1. The host document and the document in the iframe are completely separate. This seems an obvious statement to make but quite easy to overlook none the less.
2. The document in the iframe is on a separate domain (google.com in fact) which of course means that most browsers will block any attempt made from another domain to modify content within that document.
After trying all sorts of techniques to circumvent this issue, even proxying the content via my server I actually stumbled on a rather simple solution. Looking at the settings for a Google calendar you are given an snippet of code for embedding it in an iframe, that snippet has a URL in it which looks like this;
This is where you point your iframe to and is the location of the base document for your calendar, take this URL and grab the source (I used wget). Create a new page on your site with the markup retrieved from the aforementioned URL, there are two lines in the code that need updating and they look something like this;
<link type="text/css" rel="stylesheet" href="969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css">
As you can see, both tags contain relative urls, they need prefixing with “https://www.google.com/calendar/” so they look like this;
<link type="text/css" rel="stylesheet" href="https://www.google.com/calendar/969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css">
Now you are able to point your iframe to the new page on YOUR domain and not Google’s, add custom CSS declarations to the new document to override elements in the Google calendar.. job done!
One of the changes this has allowed me to make is the ability to wrap the title of a calendar item in the month view, a feature that has been requested to Google by a lot of people!