Archive for February, 2012

Google Calendar and CSS

Friday, February 24th, 2012

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.

Full article here: http://iamhigham.com/2011/01/customising-an-embedded-google-calendar