Restyle Google Calendar Gadget
Posted June 18th, 2007 in ProgrammingTags: CSS, Google, Hacking, JavaScript, Programming
My how-to for restyling Google Calendar is by far this blog’s most popular post so far. Right from the start, people had requested that I adjust the code to accommodate Google Calendar’s mini-mode. It certainly was possible using the technique I used, but it did break the agenda which was flaky to begin with given the fact the feature was experimental. Every once in a while, I’d check on the stability of mini-mode to determine if it was ripe for some hacking. Then one day the mode simply didn’t work anymore. It was weird, but after further research I found out why. Mini-mode was superseded by the Google Calendar Gadget. The configuration form does provide some customization of the style, but it is certainly limited. So just like before, I poked and prodded the code until I was able to find the means to restyle the gadget.
First step is to go to the Google Calendar Gadget page. Click on the “Add to Your Webpage” button. The reason I don’t provide a direct link is because clicking on the button appears to set some locale settings. Once there you can roughly style the calendar the way you want—like the overall size, what border, whether you want to display the calendar, agenda, or both, which calendar(s) you want to load, the link color for each event (which can be different for each calendar), etc. Note that the calendar URL that you want to use is the XML one. You get the URL by going to your Google Calendar, click on “Manage Calendars,” click the specific calendar, and then clicking the XML button under “Calendar Address.” Just copy and paste the address into the form. After you are done previewing the calendar, you’ll want to click the “Get the Code” button which will generate a script block that will be the foundation on which we’ll build.
Let’s dissect the generated HTML.
<script src="http://gmodules.com/ig/ifr
This is some JavaScript that’s part of iGoogle and the Google Gadget framework. A lot of the behind the scenes magic happens here. What I’ve determined so far is that this creates a table and iframe to contain the gadget. There’s some bad news because of this, but I’ll get to that later.
?url=http://www.google.com/ig/modules/calendar-for-your-site.xml
This XML file is what defines the gadget itself. This is where we’ll be doing most of our restyling.
&up_showCalendar2=1 &up_showAgenda=1 &up_calendarFeeds=(%7B%7D) &up_firstDay=Sunday &up_syndicatable=true &up_stylesheet= &up_sub=1
Now I added carriage returns to improve readability. Most of these settings map directly to settings you set in the form. Supposedly you can supply your own stylesheet, but the fact of the matter is it gets ignored because, as we’ll see later, the gadget provides it’s own styles inline.
&up_c0u=http%3A%2F%2Fwww.google.com%2Fcalendar%2Ffeeds%2Fuser%2540domain.tld%2Fpublic%2Fbasic &up_c0c= &up_c1u= &up_c1c= &up_c2u= &up_c2c= &up_c3u= &up_c3c=
These are the XML feeds for each of the calendars. You can embed up to four calendars and each can have a different color. The colors won’t show up in the calendar view but will show up in the agenda view for each event link as well as each subscription link.
&up_min= &up_start= &up_timeFormat=1%3A00pm &up_calendarFeedsImported=0 &synd=open &w=320 &h=450 &title=Google+Calendar &border=%23ffffff%7C3px%2C1px+solid+%23999999 &output=js"></script>
Some more settings. You can have a blank title if you want. This is also where the border is defined. Again you can have a blank border or you can be very fancy with your border design as long as it’s valid URL encoded CSS. You can also tweak the width and height if the need arises.
The next step is download the source code for the gadget. (You can select “File->Save Page As” in Firefox if you load the source code in the browser.) This way we now have a copy of the gadget that we can modify. Open up the XML file in your favorite editor. Scroll down until you find the style block. This is where most of the style changes can be made. Anywhere you see #c3d9ff or rgb(195, 217, 255) is Google blue. Most of the class selectors are self-explanatory. The one style that’s not in the style block that you may wish to change is the one contained in the table with the id pickerContainer__MODULE_ID__. This is the color for the “Loading…” splash.
The last step is to change the script block that loads the gadget. Instead of
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/calendar-for-your-site.xml
you need to change it to
<script src="http://gmodules.com/ig/ifr?url=http://mywebsite.com/path/to/file/calendar-for-your-site.xml
Don’t forget to upload the edited XML file to your web site. That should do it.
Now about that problem I alluded to earlier. The JavaScript that loads the gadget unfortunately has some hard coded styles, in particular, it sets the background to white. White is certainly a popular background color, but obviously not all web sites follow that convention. The only way to do that is to use JavaScript to dynamically change the style. In the XML file, locate this script block at the bottom:
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
document.body.onload = function() { new _CalendarModule(__MODULE_ID__); };
} else {
new _CalendarModule(__MODULE_ID__);
}
and change it to
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
document.body.onload = function() { new _CalendarModule(__MODULE_ID__); document.body.style.backgroundColor = "gray"; };
} else {
new _CalendarModule(__MODULE_ID__);
document.body.style.backgroundColor = "gray";
}
Of course feel free to change the color string to match your web site. Now don’t be surprised if after reloading the page, the background doesn’t change. I’m not a 100% sure why this is the case. My best guess is that the code is being cached, but clearing it on the client side doesn’t seem to have an effect. So there appears to be some server-side caching going on. The good news is that eventually the cached version times out and the correct background color will display. This technique can also be used to load a background image or change other style settings.
Assuming you do change the background color you will have to host your own corner images on your web site. Locate these lines in the style block of the XML file.
td.tl {background:url("http://www.google.com/calendar/images/corner_tl.gif") top left}
td.bl {background:url("http://www.google.com/calendar/images/corner_bl.gif") bottom left}
td.tr {background:url("http://www.google.com/calendar/images/corner_tr.gif") top right}
td.br {background:url("http://www.google.com/calendar/images/corner_br.gif") bottom right}
You will need to download, edit those GIF files to match your background color, and then upload the files to your site. Once that’s done, you’ll need to update the XML file to reflect the new URLs for those images.
Happy styling! When you’re done restyling your calendar, show it off!
P.S. The technique used to restyle Google Calendar can be used to edit the XML file. I leave this as an exercise for the reader. The technique described above doesn’t require PHP so will be most applicable to those non-programmers out there.
[...] UPDATE: New post on how to Restyle Google Calendar Gadget. [...]
I have successfully restyled the gadget except for the Google Blue link that links to a new event window. Any suggestions on how to change the default blue link to something else?
See it here:
http://www.lrgvdc.org/hcmpo/
Unfortunately, when viewing the site all I see is the following error message:
Error parsing module spec: Not a properly formatted file missing xml header
Sorry about that, its corrected now.
Do you know how to change the default blue event link on the Calendar Gadget?
Yeah that’s easy. Set up_c0c in the calendar URL to the desired color, for example:
up_c0c=%23006633
This will set the color to a dark green. Notice that the pound sign is URL encoded as %23. I explained this above, but maybe not explicitly enough.
Brian, thanks for the tip, worked great. One last thing, how can I remove the Google footer image and link from the bottom of the calendar?
Unfortunately, there’s no simple way to do this without drawbacks. The most direct way would be to take the entire URL for the calendar, i.e. the src value for the script block. Paste that into the address bar of your browser and save out the file as a .js file. Edit the .js file to remove the last row of the table which is not going to be obvious given all the encoding. Save and upload the file to your web site and change the src value of the script block to point to that file instead. The problem here is a) I don’t know if it’s going to work and b) even if it does, if Google makes any code changes on their end, those changes won’t be reflected in your calendar unless it breaks something. You’ll have to then update your version of the Javascript file manually. You’ll have to judge if it’s worth all that just to hide the branding.
Hi, just reading through this post and tried to get the google calander gadget to work, but I keep getting this message in the main page:
Error parsing module spec:
Not a properly formatted file
missing xml header
I’ve saved the source file and uploaded it as instructed, and also edited the index.html to link to it, but this is all I get. I’ve checked to make sure that xml is workign on my server and it seems to be, so i’m at a loss to why it wont work.
The location of the files are: http://www.novojogo.co.uk/test/
If anyone has any ideas I would appreciate it.
Thanks
Yogi
Yogi,
The error is in message: there’s a missing XML header. Now whether its in the header of the file itself or the HTTP header sent by your server, I don’t know. Those would be the two places I would look first.
[...] you restyle your embedded Google Calendar using MyGoogleCal? Maybe you’ve restyled Google Calendar Gadget by following my instructions to modify the XML configuration? Do you want to show off how you [...]
Is it possible to make the iframe background transparent? The background to my site is a gradient where the calendar will be sitting. Any advice will be greatly appreciated
Though I’ve not confirmed it myself, it should be as simple as:
document.body.style.backgroundColor = “transparent”;
As I already mentioned above in the section about styling the background, the process is a little flakey.
Another option you can try is
document.body.style.backgroundImage=’url(myimage.jpg)’;
In fact, you should be able to dynamically change any DOM-accessible style using that method.
Trying to change the look of the calendar gadget on my church website. I’ve tried numerous times to follow these instructions, but I keep getting the following error:
Error parsing module spec:
Not a properly formatted file
missing xml header
Website: http://www.elktonumc.org/index2.shtml
I’m afraid I don’t know much about xml headers. Can you help please?
Sheila,
Your server is configured to serve xml files as text/xml. You need to reconfigure the server to serve them as application/xml. Without knowing more about your server configuration I can’t help you, and I can only recommend you contact your system administrator to fix the problem.
At least I know it’s not webmaster-error! Thank you so much for taking the time to create and maintain this site. Peace and blessings to you!
hey im trying to change the colour of the month and arrows from default black
whats the area i need to change to get this black.
also could someone tell me what type of colour code this is %23006633 or recomend a colour picker for this type. i.e #333333 html and like ( 000, 000,000 ) rgb. whats that one.
Hey Scott,
The classes that style the arrows and month are .DP_prev, .DP_curr, and .DP_next. If you have Firefox I highly recommend you install the Firebug plugin. It lets you inspect HTML elements, so that you can identify what styles you need to modify.
%23006633 is just a URL encoded color code. The %23 when decoded is simply ‘#’. So the color is #006633 which is a dark green.
I was having trouble similar to Sheila’s. I don’t know much about server configurations, but I remembered that htaccess files often come in handy. I found this one :http://codesnippets.joyent.com/posts/show/105, and modified it to say xml (instead of xhtml) should be served as application/xml, uploaded it to the same folder as my calendat.xml file, and it worked! It even seems to work in IE, which I didn’t think it would…
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.xml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]
Hi
i have restyled my calendar, fairly successfully, i would love to the color of the links to change from, the default blue to, white.
I would also love to be able to null the links, so people viewing the calendar cannot click through.
Just wanted to let you know, you’ve saved my entire project with this post. Took forever to find it, but once I did…
Thanks a lot, seriously.
Thanks Brian,
This has helped me a lot!
Can you just say how you remove the hyperlink underlines, so no text decoration and where I need to put the extra code for it, please?
Thanks.
Hi,
thanks for the tips! I successfully restyled my calendar, and it works with firefox, safari, opera, chrome…
BUT, In internet explorer colours are different… It seems that IE don’t read some css variables, or read it in worng way…
Example: I changed the background color of the calendar. In firefox and all other browsers the background is #272727, like the bg of the webpage. In IE instead, the gray of the calendar is more bright… like a #777…
Anyone can help me?
Thanks
I haven’t gotten into the web publishing part of my project yet, but I want the calendar gadget to link to the full size Google calendar that will be embedded on the website.
Is this possible? Is it already a built in function of the gadget/calendar system?
Great reference. I hope to take full advantage of it once my site is ready for launch.
Rob,
The embedded calendar’s size is flexible and can be as large or small as needed (within reason). Links in the embedded calendar are directed to the calendar hosted on Google.com. This script simply reskins the embedded calendar so that you’re not stuck with cerulean blue as the only color option. Functionally, it’s identical.
I set the calendar up in December for a website, following your directions, and the client was really happy with the results.
Now that I’m ready to publish the website, none of the events on the calendar are displaying. The calendar will display, but no events.
Has there been any change in the gadget code I should know about? Or the xml format?
After spending the past two hours trying to figure this out, I’m out of ideas.
So I JUST stumbled upon this gadget edit and it’s great! I’ve followed all your steps and got it working just the way I like, cept.. Google has replaced my events with there own “You can use Google Calendar to manage your events. Sign up.” non-sense.. anyway around this? also.. I was wondering if it would be possible that when they click a date the box moves to the left instead of the right. Thanks.
actually.. got the “blah blah” statement fixed. But was presented with a new problem. The calender works fine in Firefox when I use internet explorer however, the page refreshes constantly. What’s with that?
it appears that all the format editing for this takes a bit of time.