How can apply custom css to google calendar

Google calendar is free, powerful and cloud-based, making it a good budget choice for clients needing a calendar solution.
However, there are some issues with it that require outside coding to handle:

1. The embedded version is impossible to style, because it’s in an iframe;
2. The RSS feed is fairly opaque to work with, because much of the desired data is in custom Google namespaces, the feed address is full of variables, and the feed doesn’t account for time zones very well.

Here is an example of how to deal with both of those problems. The given examples are for PHP, but the concept and much of the code could easily be translated into .NET.

STYLE THE EMBEDDED CALENDAR

While Google provides some styling options for the embedded version of the calendar, they aren’t great, and consist entirely of variables encoded into the iframe src code. Unless your needs are *very* simple, I wouldn’t bother.
Width and height: Change the iframe “width” attribute to “100%”, rather than declaring a set width. That will ensure the calendar fills whatever div you put the iframe in. You can do the same for height, if you wish.
For real styling changes, though, you’ll need a code solution. In PHP, a useful script is ReStyleGC.

Installation

1. Download the script folder, and unzip it on to your server.
2. Get the embed code for your Google Calendar. It will look something like this:

       <iframe width="320" scrolling="no" height="240" frameborder="0" style=" border-width:0" src="http://www.google.com/calendar/embed?showTabs=0&height=240&wkst=1&bgcolor=%23FFFFFF&src=CalendarID%40group.calendar.google.com&color=%230D7813&ctz=America%2FDenver">

3. Change the red portion of the “src” attribute to point to the RestyleGC script instead, keeping all the other variables:

<iframe width="100%" scrolling="no" height="240" frameborder="0" style=" border-width:0" src="/restylegc-1.0/restylegc.php?showTabs=0&height=240&wkst=1&bgcolor=%23FFFFFF&src=CalendarID%40group.calendar.google.com&color=%230D7813&ctz=America%2FDenver">

How it works: You tell it the calendar feed to get. It grabs the feed, replaces Google’s stylesheet call with a local copy, then uses jQuery to replace the iframe contents.

for more information please click here.

Posted in: