Restyle Google Calendar Gadget

Posted June 18th, 2007 in Programming
Tags: , , , ,

My how-to for restyling Google Cal­en­dar is by far this blog’s most pop­u­lar post so far. Right from the start, peo­ple had requested that I adjust the code to accom­mo­date Google Calendar’s mini-mode. It cer­tainly was pos­si­ble using the tech­nique I used, but it did break the agenda which was flaky to begin with given the fact the fea­ture was exper­i­men­tal. Every once in a while, I’d check on the sta­bil­ity of mini-mode to deter­mine if it was ripe for some hack­ing. Then one day the mode sim­ply didn’t work any­more. It was weird, but after fur­ther research I found out why. Mini-mode was super­seded by the Google Cal­en­dar Gad­get. The con­fig­u­ra­tion form does pro­vide some cus­tomiza­tion of the style, but it is cer­tainly lim­ited. So just like before, I poked and prod­ded the code until I was able to find the means to restyle the gadget.

First step is to go to the Google Cal­en­dar Gad­get page. Click on the “Add to Your Web­page” but­ton. The rea­son I don’t pro­vide a direct link is because click­ing on the but­ton appears to set some locale set­tings. Once there you can roughly style the cal­en­dar the way you want—like the over­all size, what bor­der, whether you want to dis­play the cal­en­dar, agenda, or both, which calendar(s) you want to load, the link color for each event (which can be dif­fer­ent for each cal­en­dar), etc. Note that the cal­en­dar URL that you want to use is the XML one. You get the URL by going to your Google Cal­en­dar, click on “Man­age Cal­en­dars,” click the spe­cific cal­en­dar, and then click­ing the XML but­ton under “Cal­en­dar Address.” Just copy and paste the address into the form. After you are done pre­view­ing the cal­en­dar, you’ll want to click the “Get the Code” but­ton which will gen­er­ate a script block that will be the foun­da­tion on which we’ll build.

Let’s dis­sect the gen­er­ated HTML.

<script src="http://gmodules.com/ig/ifr

This is some JavaScript that’s part of iGoogle and the Google Gad­get frame­work. A lot of the behind the scenes magic hap­pens here. What I’ve deter­mined so far is that this cre­ates a table and iframe to con­tain the gad­get. 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 gad­get 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 car­riage returns to improve read­abil­ity. Most of these set­tings map directly to set­tings you set in the form. Sup­pos­edly you can sup­ply your own stylesheet, but the fact of the mat­ter is it gets ignored because, as we’ll see later, the gad­get pro­vides 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=
&amp;up_c3u=
&amp;up_c3c=

These are the XML feeds for each of the cal­en­dars. You can embed up to four cal­en­dars and each can have a dif­fer­ent color. The col­ors won’t show up in the cal­en­dar view but will show up in the agenda view for each event link as well as each sub­scrip­tion 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 set­tings. You can have a blank title if you want. This is also where the bor­der is defined. Again you can have a blank bor­der or you can be very fancy with your bor­der 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 down­load the source code for the gad­get. (You can select “File->Save Page As” in Fire­fox if you load the source code in the browser.) This way we now have a copy of the gad­get that we can mod­ify. Open up the XML file in your favorite edi­tor. Scroll down until you find the style block. This is where most of the style changes can be made. Any­where you see #c3d9ff or rgb(195, 217, 255) is Google blue. Most of the class selec­tors are self-explanatory. The one style that’s not in the style block that you may wish to change is the one con­tained in the table with the id pickerContainer__MODULE_ID__. This is the color for the “Load­ing…” splash.

The last step is to change the script block that loads the gad­get. 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 for­get to upload the edited XML file to your web site. That should do it.

Now about that prob­lem I alluded to ear­lier. The JavaScript that loads the gad­get unfor­tu­nately has some hard coded styles, in par­tic­u­lar, it sets the back­ground to white. White is cer­tainly a pop­u­lar back­ground color, but obvi­ously not all web sites fol­low that con­ven­tion. The only way to do that is to use JavaScript to dynam­i­cally 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 sur­prised if after reload­ing the page, the back­ground 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 clear­ing 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 even­tu­ally the cached ver­sion times out and the cor­rect back­ground color will dis­play. This tech­nique can also be used to load a back­ground image or change other style settings.

Assum­ing you do change the back­ground color you will have to host your own cor­ner 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 down­load, edit those GIF files to match your back­ground 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 cal­en­dar, show it off!

P.S. The tech­nique used to restyle Google Cal­en­dar can be used to edit the XML file. I leave this as an exer­cise for the reader. The tech­nique described above doesn’t require PHP so will be most applic­a­ble to those non-programmers out there.

34 Responses to “Restyle Google Calendar Gadget”

  1. Linden LAN » Blog Archive » Restyle Google Calendar said on June 18th, 2007 at 5:21 pm:

    […] UPDATE: New post on how to Restyle Google Cal­en­dar Gadget. […]

  2. Eric P said on August 30th, 2007 at 7:50 am:

    I have suc­cess­fully restyled the gad­get except for the Google Blue link that links to a new event win­dow. Any sug­ges­tions on how to change the default blue link to some­thing else?

    See it here:
    http://www.lrgvdc.org/hcmpo/

  3. Brian said on August 30th, 2007 at 12:08 pm:

    Unfor­tu­nately, when view­ing the site all I see is the fol­low­ing error message:

    Error pars­ing mod­ule spec: Not a prop­erly for­mat­ted file miss­ing xml header

  4. Eric P said on August 30th, 2007 at 2:29 pm:

    Sorry about that, its cor­rected now.

  5. Eric P said on August 31st, 2007 at 6:55 am:

    Do you know how to change the default blue event link on the Cal­en­dar Gadget?

  6. Brian said on August 31st, 2007 at 8:15 am:

    Yeah that’s easy. Set up_c0c in the cal­en­dar 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 explic­itly enough.

  7. Eric P said on August 31st, 2007 at 11:36 am:

    Brian, thanks for the tip, worked great. One last thing, how can I remove the Google footer image and link from the bot­tom of the calendar?

  8. Brian said on August 31st, 2007 at 2:58 pm:

    Unfor­tu­nately, there’s no sim­ple way to do this with­out draw­backs. The most direct way would be to take the entire URL for the cal­en­dar, 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 obvi­ous given all the encod­ing. 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 prob­lem 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 cal­en­dar unless it breaks some­thing. You’ll have to then update your ver­sion of the Javascript file man­u­ally. You’ll have to judge if it’s worth all that just to hide the branding.

  9. uberYogi said on October 19th, 2007 at 8:12 am:

    Hi, just read­ing through this post and tried to get the google calan­der gad­get to work, but I keep get­ting this mes­sage in the main page:

    Error pars­ing mod­ule spec:
    Not a prop­erly for­mat­ted file
    miss­ing 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 loca­tion of the files are: http://www.novojogo.co.uk/test/

    If any­one has any ideas I would appre­ci­ate it.

    Thanks
    Yogi

  10. Brian said on October 23rd, 2007 at 12:21 pm:

    Yogi,

    The error is in mes­sage: there’s a miss­ing 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.

  11. Linden LAN » Blog Archive » Calendar Casting Call said on January 10th, 2008 at 7:51 pm:

    […] you restyle your embed­ded Google Cal­en­dar using MyGoogle­Cal? Maybe you’ve restyled Google Cal­en­dar Gad­get by fol­low­ing my instruc­tions to mod­ify the XML con­fig­u­ra­tion? Do you want to show off how you […]

  12. Dustin said on March 3rd, 2008 at 8:18 am:

    Is it pos­si­ble to make the iframe back­ground trans­par­ent? The back­ground to my site is a gra­di­ent where the cal­en­dar will be sit­ting. Any advice will be greatly appreciated :)

  13. Brian said on March 3rd, 2008 at 8:08 pm:

    Though I’ve not con­firmed it myself, it should be as sim­ple as:

    document.body.style.backgroundColor = “transparent”;

    As I already men­tioned above in the sec­tion about styling the back­ground, the process is a lit­tle flakey.

    Another option you can try is

    document.body.style.backgroundImage=‘url(myimage.jpg)’;

    In fact, you should be able to dynam­i­cally change any DOM-accessible style using that method.

  14. Sheila said on March 7th, 2008 at 9:22 pm:

    Try­ing to change the look of the cal­en­dar gad­get on my church web­site. I’ve tried numer­ous times to fol­low these instruc­tions, but I keep get­ting the fol­low­ing error:

    Error pars­ing mod­ule spec:
    Not a prop­erly for­mat­ted file
    miss­ing xml header

    Web­site: http://www.elktonumc.org/index2.shtml

    I’m afraid I don’t know much about xml head­ers. Can you help please?

  15. Brian said on March 8th, 2008 at 12:47 am:

    Sheila,

    Your server is con­fig­ured to serve xml files as text/xml. You need to recon­fig­ure the server to serve them as application/xml. With­out know­ing more about your server con­fig­u­ra­tion I can’t help you, and I can only rec­om­mend you con­tact your sys­tem admin­is­tra­tor to fix the problem.

  16. Sheila said on March 8th, 2008 at 5:52 am:

    At least I know it’s not webmaster-error! Thank you so much for tak­ing the time to cre­ate and main­tain this site. Peace and bless­ings to you!

  17. scott said on June 5th, 2008 at 12:20 am:

    hey im try­ing 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 some­one 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.

  18. Brian said on June 8th, 2008 at 8:43 am:

    Hey Scott,

    The classes that style the arrows and month are .DP_prev, .DP_curr, and .DP_next. If you have Fire­fox I highly rec­om­mend you install the Fire­bug plu­gin. It lets you inspect HTML ele­ments, so that you can iden­tify what styles you need to modify.

    %23006633 is just a URL encoded color code. The %23 when decoded is sim­ply ‘#’. So the color is #006633 which is a dark green.

  19. Nora Brown said on July 20th, 2008 at 12:04 pm:

    I was hav­ing trou­ble sim­i­lar to Sheila’s. I don’t know much about server con­fig­u­ra­tions, but I remem­bered that htac­cess files often come in handy. I found this one :http://codesnippets.joyent.com/posts/show/105, and mod­i­fied 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
    Rewrite­Base /
    Rewrite­Cond %{HTTP_ACCEPT} application/xhtml\+xml
    Rewrite­Cond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
    Rewrite­Cond %{REQUEST_URI} \.xml$
    Rewrite­Cond %{THE_REQUEST} HTTP/1\.1
    RewriteRule .* — [T=application/xhtml+xml]

  20. scott said on July 21st, 2008 at 8:59 pm:

    Hi

    i have restyled my cal­en­dar, fairly suc­cess­fully, 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 peo­ple view­ing the cal­en­dar can­not click through.

  21. 0armada said on August 3rd, 2008 at 8:57 pm:

    Just wanted to let you know, you’ve saved my entire project with this post. Took for­ever to find it, but once I did…
    Thanks a lot, seriously. :)

  22. Rob said on September 9th, 2008 at 5:12 pm:

    Thanks Brian,

    This has helped me a lot!

    Can you just say how you remove the hyper­link under­lines, so no text dec­o­ra­tion and where I need to put the extra code for it, please?

    Thanks.

  23. luther said on November 26th, 2008 at 1:46 am:

    Hi,

    thanks for the tips! I suc­cess­fully restyled my cal­en­dar, and it works with fire­fox, safari, opera, chrome…

    BUT, In inter­net explorer colours are dif­fer­ent… It seems that IE don’t read some css vari­ables, or read it in worng way…
    Exam­ple: I changed the back­ground color of the cal­en­dar. In fire­fox and all other browsers the back­ground is #272727, like the bg of the web­page. In IE instead, the gray of the cal­en­dar is more bright… like a #777…

    Any­one can help me?

    Thanks

  24. Rob said on January 5th, 2009 at 9:08 pm:

    I haven’t got­ten into the web pub­lish­ing part of my project yet, but I want the cal­en­dar gad­get to link to the full size Google cal­en­dar that will be embed­ded on the website.

    Is this pos­si­ble? Is it already a built in func­tion of the gadget/calendar system?

    Great ref­er­ence. I hope to take full advan­tage of it once my site is ready for launch. :)

  25. Brian said on January 5th, 2009 at 10:42 pm:

    Rob,

    The embed­ded calendar’s size is flex­i­ble and can be as large or small as needed (within rea­son). Links in the embed­ded cal­en­dar are directed to the cal­en­dar hosted on Google.com. This script sim­ply reskins the embed­ded cal­en­dar so that you’re not stuck with cerulean blue as the only color option. Func­tion­ally, it’s identical.

  26. Deborah said on February 16th, 2009 at 2:53 pm:

    I set the cal­en­dar up in Decem­ber for a web­site, fol­low­ing your direc­tions, and the client was really happy with the results.

    Now that I’m ready to pub­lish the web­site, none of the events on the cal­en­dar are dis­play­ing. The cal­en­dar will dis­play, but no events.

    Has there been any change in the gad­get code I should know about? Or the xml format?

    After spend­ing the past two hours try­ing to fig­ure this out, I’m out of ideas.

  27. Richard said on April 17th, 2009 at 3:12 pm:

    So I JUST stum­bled upon this gad­get edit and it’s great! I’ve fol­lowed all your steps and got it work­ing just the way I like, cept.. Google has replaced my events with there own “You can use Google Cal­en­dar to man­age your events. Sign up.” non-sense.. any­way around this? also.. I was won­der­ing if it would be pos­si­ble that when they click a date the box moves to the left instead of the right. Thanks.

  28. Richard said on April 17th, 2009 at 5:21 pm:

    actu­ally.. got the “blah blah” state­ment fixed. But was pre­sented with a new prob­lem. The cal­en­der works fine in Fire­fox when I use inter­net explorer how­ever, the page refreshes con­stantly. What’s with that?

  29. Zak said on April 24th, 2009 at 12:40 pm:

    it appears that all the for­mat edit­ing for this takes a bit of time.

  30. Deb said on July 13th, 2009 at 5:20 pm:

    Thanks for this — it was very help­ful. I am won­der­ing how to change the text for­mat of the agenda. Size etc. Can any­one help?

  31. David Coldrick said on August 25th, 2009 at 7:26 pm:

    I’m hav­ing some trou­ble get­ting this to work for me: spec­i­fy­ing the Title, first­Day etc all works fine, but the gad­get does not come up in Agenda mode (despite my set­ting &up_showAgenda=1 as you do in your exam­ple, and the height and width specs do not seem to take (I set &w=600 and &h=200).

    The other ques­tion I have is why the set­ting &up_showCalendar2=1 — I’ve tried both that and &up_showCalendar1=1, with no vis­i­ble change.

    Thanks for any help,
    David

  32. Brian said on August 25th, 2009 at 7:56 pm:

    @David

    It may be bro­ken on Google’s end. I don’t think they sup­port it any­more. I’d rec­om­mend you use the stan­dard embed­ded cal­en­dar. Check out my site specif­i­cally for restyling the cal­en­dar http://www.restylegc.com. You can switch it to agenda mode and whole lot more.

  33. David Coldrick said on August 26th, 2009 at 12:24 am:

    Thanks, Brian. Only prob­lem for me is that I’m tring to use this with Square­space, and PHP is not avail­able there. Before I dig into it, is i pos­si­ble to do the cus­tomi­sa­tion with­out hav­ing PHP available??

    Thanks and regards,
    David

  34. Brian said on August 26th, 2009 at 8:21 am:

    Yes and no. You can host the script some­where else that does sup­port PHP. You just have to adjust the iframe src attribute accordingly.

Subscribe to this post/thread