The long awaited new ver­sion of MyGoogle­Cal is here. It sup­ports the new AJAX-enabled Javascript method Google switched to last month. As a bonus, the new ver­sion has native sup­port for mul­ti­ple cal­en­dars each with their own col­ors! Other changes to the code include offi­cially switch­ing from fopen to curl to retrieve the data. Fur­ther­more, the code replaces much less HTML since it’s encap­su­lated in Javascript. With­out fur­ther ado…

UPDATE: MyGoogle­Cal now has a third ver­sion.

Down­load: mygooglecal2.zip. Con­tains MyGoogleCal2.php, mygooglecal2.css, MyGoogleCal2js.php, and an .htac­cess file. The CSS file is not guar­an­teed to be up-to-date so you may have to fol­low the instruc­tions described in the PHP file to down­load the lat­est ver­sion from Google.

<?php
/*******************************************************************************
 * FILE: MyGoogleCal2.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal2.php?src=user%40domain.tld"></iframe>
 *
 *  where user@domain.tld is a valid Google Calendar account.
 *
 * VALID QUERY STRING PARAMETERS:
 *    title:         any valid url encoded string 
 *                   if not present, takes title from first src
 *    showTitle:     0 or 1 (default)
 *    showNav:       0 or 1 (default)
 *    showDate:      0 or 1 (default)
 *    showTabs:      0 or 1 (default)
 *    showCalendars: 0 or 1 (default)
 *    mode:          WEEK, MONTH (default), AGENDA
 *    height:        a positive integer (should be same height as iframe)
 *    wkst:          1 (Sun; default), 2 (Mon), or 7 (Sat)
 *    hl:            en, zh_TW, zh_CN, da, nl, en_GB, fi, fr, de, it, ja, ko, 
 *                   no, pl, pt_BR, ru, es, sv, tr
 *                   if not present, takes language from first src
 *    bgcolor:       url encoded hex color value, #FFFFFF (default)
 *    src:           url encoded Google Calendar account (required)
 *    color:         url encoded hex color value     
 *                   must immediately follow src
 *    
 *    The query string can contain multiple src/color pairs.  It's recommended 
 *    to have these pairs of query string parameters at the end of the query 
 *    string.
 *
 * HISTORY:
 *   22 March    2008 - Replaced the custom javascript with a PHP script that 
 *                      uses the same technique as MyGoogleCal.php
 *   14 March    2008 - Update to match Google changes to javascript code
 *   14 January  2008 - Fixed Add to Calendar URL to point to Google
 *    3 January  2008 - Reverted back to customized javascript code to fix
 *                      bug where no data is displayed when navigating
 *                      into future or past
 *                      Note: imported calendars (e.g. iCal) should work again
 *   29 October  2007 - Update to match Google changes to javascript code
 *                      Note: imported calendars (e.g. iCal) do not work
 *   14 October  2007 - Original release
 *   
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/

/* URL for overriding stylesheet
 * The best way to create this stylesheet is to 
 * 1) Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
 *    browser,
 * 2) View the source (e.g., View->Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *    <link> tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that's more easily editable.
 */
$stylesheet = 'mygooglecal2.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal2js.php?$1"';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

Use is sim­i­lar to the orig­i­nal MyGoogleCal.php. To help cre­ate the <iframe>, you can use the Embed­d­a­ble Cal­en­dar Helper. Just remem­ber to update the src attribute to point to MyGoogleCal2.php and not http://www.google.com/calendar/embed.

In addi­tion to a cus­tom CSS file the script makes use of a cus­tom Javascript file. Each URL is set after the script’s header and includes instruc­tions on how to down­load ver­sions of these files from Google. This is impor­tant since it appears that the Javascript file is local­ized. (I included copies that I down­loaded in the above Zip file.)

Update (22 Mar 08): I cre­ated a new PHP file, MyGoogleCal2js.php, which down­loads the JavaScript code and edits the code on-the-fly. This negates the need to main­tain a cus­tomized ver­sion of the JavaScript code on the same server as the MyGoogleCal.php script. This should also lessen the chance that MyGoogleCal2.php will break when Google updates the code as long as the changes are minor.

The UI images are no longer con­tained in the CSS file. You have two options on how to han­dle this. If your site runs off of Apache, you can cre­ate a rewrite rule to hotlink to the Google images. (I included an .htac­cess file in the Zip file above that has a sam­ple rule.) The other, more con­ven­tional option is to cre­ate an “images” sub­folder where the script is located and place copies of these images there. You will def­i­nitely have to do this if you want to replace those images with cus­tomized ver­sions. (I included images in the Zip file.)

What I’m hung-up on right now is fig­ur­ing out a way to not have to save and rewrite the Javascript file. The Javascript file is respon­si­ble for draw­ing the cal­en­dar, retriev­ing the XML data from Google, and then putting that data into the cal­en­dar. The _init() func­tion dynam­i­cally cre­ates the URL from which to retrieve the XML data by using the browser’s window.location.host prop­erty. Since the browser will pre­sum­ably be point­ing to your site, the host prop­erty will not be www.google.com. As a result, the Javascript hangs at the XML load­ing stage fails to retrieve data when nav­i­gat­ing into the future or past. My attempts at cir­cum­vent­ing this prob­lem has been met with lit­tle success.

I tried the passthru direc­tive in .htac­cess file like so:

RewriteRule ^(calendar/feeds/.*)$ http://www.google.com/$1 [P]

The browser spits out a 502 error.

A redi­rect, [R] instead of [P], only works half-way. The Xml­HttpRe­quest goes thru but the data is rejected because it’s con­sid­ered inse­cure since you can’t load data retrieved from an exter­nal domain.

I also tried ProxyPass/ProxyPassReverse to map

/calendar/

to


http://www.google.com/calendar

but it sim­ply results in an error. I’ll have to con­sult with my host to fig­ure if the error is the con­fig­u­ra­tion on their end or mine.

Update (03 Jan 08): After talk­ing with my host­ing provider it turns out this error is the fault of my vir­tual server and it won’t be fixed since they’re retir­ing the hard­ware. I’ve been placed in the queue to migrate my account over to a new (hope­fully problem-free) server. In any case, I’ll def­i­nitely revisit this solu­tion after the migra­tion is over and test it then.

For more info, check­out: Fix­ing AJAX: XML­HttpRe­quest Con­sid­ered Harm­ful or Use a Web Proxy for Cross-Domain XML­HttpRe­quest Calls. The last one has pretty pictures.

Failed exper­i­ments include:

  • Use the Javascript pro­to­type mech­a­nism to some­how over­ride the window.location.host prop­erty to return a string of my choosing.

  • Rewrite a request to www.google.com to point to MyGoogleCal2.php so that I could inject code into the cal­en­dar page. I thought this had a lot promise up until the point I real­ized I couldn’t put an .htac­cess file at google.com. This was one of those “Duh!” moments.

  • Manip­u­late the <iframe> DOM in order to change its document.styleSheets prop­erty directly. Due to secu­rity rea­sons, you can’t mod­ify, let alone read, the DOM prop­er­ties across dif­fer­ent domains.

  • Proxy the Xml­HttpRe­quest thru a curl script. This almost worked. The curl request suc­ceeded in get­ting the JSON data, but for what­ever rea­son, the Javascript code failed to do any­thing with it. Depend­ing on the content-type requested for the response, either noth­ing hap­pen­ing or the browser would spit out a Javascript error. I’m sure it had to with an incom­plete request header or return­ing just the response data instead of the entire response. But what­ever rea­son it was, this solu­tion seemed more trou­ble than it was worth.

Update (29 Oct 07): Google’s new ver­sion of the Javascript code does not require any cus­tomiza­tion. Do you sup­pose some Google devel­oper read my post? :-) How­ever, a side-effect is that imported cal­en­dars do not work. I’m bet­ting it has to do with Xml­HttpRe­quest per­mis­sions, but I won’t know for cer­tain with­out fur­ther inves­ti­ga­tion.

When you’re done restyling your cal­en­dar, show it off! Oh and don’t for­get to Digg the article.

79 Responses to “Restyle Google Calendar 2”

  1. Linden LAN » Blog Archive » Restyle Google Calendar said on October 14th, 2007 at 9:40 pm:

    […] UPDATE: New post on the new ver­sion of MyGoogleCal. […]

  2. Eric Bidwell said on October 18th, 2007 at 3:06 pm:

    The “speech bub­ble” that pops up when you click on an event in the month view wasn’t work­ing prop­erly. The images needed aren’t in the image folder you pro­vided in the zip file. I got it to work by adding the images to the folder. You can find the images at

    http://www.google.com/calendar/images/close.gif
    http://www.google.com/mapfiles/iw_tap.png
    http://www.google.com/mapfiles/iw_sw.png
    http://www.google.com/mapfiles/iw_se.png
    http://www.google.com/mapfiles/iw_s.png
    http://www.google.com/mapfiles/iw_w.png
    http://www.google.com/mapfiles/iw_nw.png
    http://www.google.com/mapfiles/iw_n.png
    http://www.google.com/mapfiles/iw_e.png
    http://www.google.com/mapfiles/iw_ne.png

    These are also ref­er­enced in the .js file but are missing:

    http://www.google.com/calendar/images/icon_moreleft.gif
    http://www.google.com/calendar/images/icon_moreright.gif
    http://www.google.com/calendar/images/transparent_sm.gif

    Not sure when those are needed but might as well be thorough ;)

  3. Brian said on October 20th, 2007 at 3:25 pm:

    Thanks for the heads-up Eric. I updated the zip file to include the addi­tional images (includ­ing the seem­ingly unused ones).

  4. Yu-Tuan Lin said on October 23rd, 2007 at 2:08 am:

    Thank you for the restyled ver­sion of google cal­en­dar. It has enhanced our usage greatly.

    How­ever, we would like to ask a tech­ni­cal ques­tion which may seem triv­ial but is out­side our capa­bil­i­ties, and any sort of help or instruc­tion will be greatly appreciated.

    We are work­ing on auto-inserting the organizer’s iden­tity for any event hosted by the cal­en­dar owner, and up till now, this prob­lem can­not be resolved. We have to man­u­ally type in the orga­nizer each time we put up an event.

    Thank you so much for your atten­tion and we look for­ward to hear responses from you.

  5. Brian said on October 23rd, 2007 at 10:07 am:

    Yu-Tuan,

    You’re wel­come. Upon my ini­tial inves­ti­ga­tions of your prob­lem, it turns out Google Cal­en­dar already keeps track of the account that cre­ates an event. This can be ver­i­fied by view­ing the XML feed of a cal­en­dar. Another ver­i­fi­ca­tion is to go to the Google Cal­en­dar site, sub­scrib­ing to a cal­en­dar that is not your own, and click­ing on an event that you did not cre­ate; you will see a data field called “Creator.”

    Now even though Google includes the author infor­ma­tion for each event, they chose not to dis­play this data for the embed­ded ver­sion of the cal­en­dar. Adding this func­tion­al­ity to the cus­tom Javascript appears to be straight­for­ward but far from triv­ial because the code is obfus­cated as result of the data com­pres­sion tech­niques applied. I’ll look into adding this fea­ture to the cus­tom Javascript since it appears to be use­ful, but I can’t guar­an­tee that I’ll be successful.

  6. Pat Erler said on October 27th, 2007 at 4:02 am:

    hi,

    thanks for your efforts, but i don’t get it to work.

    i want to adjust the col­ors of this calendar:

    http://patsplanet.com/coloradio/index.html

    but fol­low­ing your instruc­tions here:

    http://patsplanet.com/coloradio/index2.php

    i don’t get any result. the stylesheet i want to use is this

    http://patsplanet.com/coloradio/coloradio.css

    the upper win­dow is just one cal­en­der, but in the end i need to inte­grate 4 cal­en­dars like in the index.html this is the sec­ond box on the page). please have a look at the source of index2.php

    another ques­tion:

    is it pos­si­ble to have all events dis­played in open state, as if you have clicked on the title of the event? maybe with adjust­ing the javascript?

    PAT

  7. Eric Bidwell said on October 28th, 2007 at 10:23 pm:

    My cal­en­dar seems to be bro­ken, not sure why. Also seem that google has changed their lay­out for cal­en­dar details… Any ideas?

  8. Brian said on October 29th, 2007 at 10:09 pm:

    Pat, Eric, and every­one else hav­ing problems,

    Please give the new ver­sion a try. The old stylesheet should still work fine, but I included an updated ver­sion in the .zip just in case.

  9. Michael Mc said on November 1st, 2007 at 6:40 am:

    Brian, THANK YOU!

    I will get to work on this new ver­sion this week­end and keep you posted on my results.

    Again, my sin­cer­est thanks!

  10. Eric Bidwell said on November 3rd, 2007 at 8:13 pm:

    Just noticed the note to the 10/29 update about ical fed cal­en­ders not work­ing. That’s prob­a­bly what broke my cal­en­der. Any more info on this? Ie, if it will be avail­able in the future or is it pos­si­ble through some other method now?

  11. Travis Dahl said on November 15th, 2007 at 7:06 pm:

    Thanks man, every­one was telling me that my cal­en­dar dis­ap­peared… I knew you’d have an answer. Thanks again for all your hard work.

  12. nate said on November 29th, 2007 at 8:43 am:

    Brian, love MyGoogleCal2!!!

    For some rea­son my add cal­en­dar but­ton (calendar_plus_en.gif) doesn’t work. Any ideas.

  13. Brian said on November 29th, 2007 at 11:06 pm:

    Nate,

    Do all the other images appear? If so, it may just be a browser caching prob­lem. If you test using IE, it should show the bro­ken image icon. Right-click it and view the image by itself. If it appears, then go back to the page with the cal­en­dar and see if the image appears there. Refresh as needed. If it still does not appear, make sure the file exists in your “images” subfolder.

  14. Daniel said on November 30th, 2007 at 8:30 am:

    Hey Brian, the idea of restyling google cal is great, but I have been hav­ing trou­ble get­ting it to work!

    For some rea­son only the events in the cur­rent month (and the cou­ple of days before/after it) are vis­i­ble. All the oth­ers can­not be seen — they are just not listed!
    I’ve looked at a few other sites that use your script and that doesn’t seem to hap­pen for them!
    Any ideas/tips?

    Thanks!

  15. nate said on November 30th, 2007 at 12:53 pm:

    Brian,

    Yes, all other images appear. I deleted my cache and images are in the proper “images” subfolder.

    The prob­lem seems to be the link on that image. When you click the add Google cal­en­dar but­ton (calendar_plus_en.gif) the url is:

    http://“mylocalhost”/calendar/render?cid=http%3A%2F%2F“mylocalhost”%2F

    When it should be:

    http://www.google.com/calendar/render?cid=http%3A%2F%2Fwww.google.com%2F

    Not sure how this is hap­pen­ing. I really appre­ci­ate your help.

  16. Brian said on December 2nd, 2007 at 10:55 pm:

    I’m sorry Nate. I mis­un­der­stood your ques­tion. It turns out you found a bug. In any case, I think I fixed it. What’s hap­pen­ing is that Google’s Javascript code is using your domain for the base of its URL. To fix this, your server needs to sup­port mod_rewrite. We need to rewrite all requests to http://www.yoursite.tld/calendar/render to http://www.google.com/calendar/render. The fol­low­ing mod_rewrite rule accom­plishes this:

    Rewrite­Cond %{QUERY_STRING} cid=http\%3A\%2F\%2Fwww.yoursite.tld(.*?)$
    RewriteRule ^calendar/render$ http://www.google.com/calendar/render?cid=http\%3A\%2F\%2Fwww.google.com%1 [R,NE,NC]

    The first line iso­lates the part of the query string we want to keep. The sec­ond line redi­rects the site vis­i­tor to Google while fix­ing the query string. This rule only sup­ports a sin­gle embed­ded cal­en­dar. Down­load the lat­est .zip file and see the com­ments in the .htac­cess file if you need to sup­port more than one embed­ded calendar.

  17. Nate said on December 3rd, 2007 at 9:11 pm:

    Brian,

    Nice! The rewrite via .htac­cess works like a charm.

    Cheers!

  18. jason said on December 12th, 2007 at 11:06 am:

    Does this work with shared group cal­en­dars? I can’t seem to get any events to appear when using a group cal­en­dar editable by more than one user. (cal­en­dar url being XXXXX@groups.calendar.google.com

  19. Ralph said on December 15th, 2007 at 11:41 am:

    Hi Brian,

    I’ve been try­ing for two days to get this to work and can’t get it right.

    My php code is on this screen­shot
    http://www.winefinders-usa.com/screenshot.htm

    The page I’m try­ing to load the cal­en­dar into is
    http://www.winefinders-usa.com/calendarcodetest.htm

    All of the files, includ­ing the .htac­cess and php are loaded into a
    http://www.winefinders-usa.com/calendar

    Here is the code from my .htac­cess as well.
    Rewrite­Cond %{QUERY_STRING} cid=http\%3A\%2F\%2Fwww.winefinders-usa.com(.*?)$
    RewriteRule ^calendar/render$ http://www.google.com/calendar/render?cid=http\%3A\%2F\%2Fwww.google.com%1 [R,NE,NC]

    Any­thing you can offer would be extremely appreciated.

    Thanks,
    Ralph

  20. Brian said on December 15th, 2007 at 2:34 pm:

    Hey Ralph,

    You should restore MyGoogleCal2.php back to its orig­i­nal code. You shouldn’t have to touch the code except to change the $stylesheet vari­able. You sup­ply the src value via the query string of the URL.

    Also for the time being, don’t use the .htac­cess file. It’s used to fix the cal­en­dar sub­scrip­tion but­ton. MyGoogleCal2.php will func­tion with­out it. I don’t expect the rewrite rule to be the source, but the only way to know is to take it out of the equa­tion. Once the cal­en­dar loads you can put the .htac­cess file back.

    Last, you should set some attrib­utes for your <iframe> like style=“border-width:0″ width=“800” height=“600” frameborder=“0” scrolling=“no”. For test­ing pur­poses, you don’t even need the iframe; you can just load MyGoogleCal2.php directly in the browser.

    You might also want to strate­gi­cally place some print state­ments to deter­mine that all the code is being executed.

  21. Ralph said on December 17th, 2007 at 2:53 pm:

    Thanks, Brian.

    So I’ve restored the orig­i­nal MyGoogleCal2.php script, deleted and changed noth­ing but the $stylesheet vari­able to the fol­low­ing url:
    http://www.winefinders-usa.com/calendar/mygooglecal2.css

    My Iframe code is now:

    My Query String is :
    // URL for the cal­en­dar
    $url = “”;
    if(count($_GET) > 0) {
    $url = “http://www.google.com/calendar/embed?” . $_SERVER[’QUERY_STRING’];;

    My full php code is here:
    http://www.winefinders-usa.com/calendar/sample.htm

    I still don’t get any­thing but a blank page that’s here:
    http://www.winefinders-usa.com/calendar/calendarcodetest.htm

    What am I doing wrong? Sorry, I’m new to php.

    Thanks,
    Ralph

  22. Brian said on December 18th, 2007 at 7:34 pm:

    Ralph,

    Is your PHP instal­la­tion work­ing? To check, cre­ate a PHP file with the fol­low­ing code and access that page. It should dump lots of infor­ma­tion regard­ing your instal­la­tion, like ver­sion num­ber, mod­ules that are loaded, etc.

    < ?php phpinfo(); ?>

    P.S. The IFRAME in your calendarcodetest.htm has a miss­ing quote for the src attribute, but that still won’t fix the blank-page prob­lem you’re experiencing.

    P.P.S. I can load your cal­en­dar with MyGoogleCal2.php on my site, but it says “Events from one or more cal­en­dars could not be shown here because you do not have the per­mis­sion to view them.” Make sure your cal­en­dar is a pub­lic calendar.

  23. Riley said on January 1st, 2008 at 10:15 pm:

    Hey Brian,

    Thanks for fig­ur­ing this out. I have been work­ing with your script and things are close to per­fect. I am building/testing the site on MAMP for Mac OS X. Since it is still all local I can’t pro­vide links.

    My prob­lem is that the cal­en­dars won’t show events past a cer­tain point from the cur­rent date (about a month) . It just looks like the events don’t exist, but when you view the cal­en­dar through Google they are there. I can’t fig­ure out why. Is any­one else expe­ri­enc­ing this? Could the local server cause a problem?

    I would really appre­ci­ate some help from you or your readers.

    Thanks again,
    Riley

  24. Brian said on January 1st, 2008 at 11:39 pm:

    Happy New Year Riley and every­one else!

    It’s always great to start the new year with a new bug. I kid. My ini­tial inves­ti­ga­tion shows that the Xml­HttpRe­quest prob­lem that plagued my orig­i­nal ver­sion of this script did not com­pletely disappear.

    What’s hap­pen­ing is that when the Google Cal­en­dar is first requested, it already has the data for the cur­rent month. This is all fine and good if all you care about is the cur­rent month. How­ever if you use the nav­i­ga­tion buttons/links on the month/agenda, the Javascript makes an asyn­chro­nous request to get the data. (FYI this is AJAX in action.) The rea­son this breaks is because the requested URL is dynam­i­cally cre­ated using your domain name instead of google.com result­ing in a silent 404 error.

    The first ver­sion of this script replaces Google’s Javascript code with a mod­i­fied ver­sion. It looks like I may have to revert the code back so it does this again. More details about the prob­lem and solu­tion is listed above in the striked-out text.

    Since I’ve not thought about this prob­lem in a while, I’ve come up with a cou­ple of new approaches with which I want to exper­i­ment. Stay tuned.

    Mean­while, you may want to set the showTabs, show­Date, and show­Nav query string vari­ables to 0.

  25. Riley said on January 2nd, 2008 at 1:25 am:

    Happy New Year to you Brian!

    Thanks for the lightning-fast update. I hope all of my requests get such a quick reply this year.

    Set­ting the show___ vari­ables to 0 should work for me for the time being. But it is a bit of a bum­mer once it gets later in the month.

    I tried to look at Google’s javascript file (I pulled it in the same fash­ion as the css file) and it is pretty outta my league. I might still try and mess with it though, I’ll post if I get anywhere.

    I’ll be stay­ing tuned (if you fix it and want shoot me an email that would be totally awesome).

    TIP: for those of you wad­ing through the css file, try Fire­bug. It’s a Fire­fox exten­sion that dis­plays which css prop­er­ties con­trol which ele­ments. It helped me immensely.

    Thanks,
    –Riley

  26. Brian said on January 3rd, 2008 at 8:36 pm:

    Alrighty, I’ve reverted the code back to the orig­i­nal (Oct 14) method. This should have the side effect of being com­pat­i­ble with iCal cal­en­dars again. The cus­tomized Javascript file is newer, included in the Zip for con­ve­nience. The .htac­cess and MyGoogleCal2.php have also been updated.

  27. Martin said on January 10th, 2008 at 10:23 am:

    Hi Brian,

    The con­cept of your code is great. I have some prob­lems imple­ment­ing it though. With the old MyGoogleCal.php i got the prob­lem that the stylesheet is not imple­mented. With ver­sion num­ber two i get a blank page.

    I just changed the loca­tion of the css with my own one and use the cor­rect query string.

    The code is imple­mented here: http://www.cumgrano.nl/calendar.html
    And the MyGoogleCal2.php looks like this: http://www.cumgrano.nl/MyGoogleCal2.txt

    Do you have any ideas on what I’m doing wrong?

  28. Brian said on January 10th, 2008 at 7:37 pm:

    Hey Mar­tin,

    Make sure your PHP instal­la­tion is work­ing cor­rectly. See com­ment #22. Your web server also needs to sup­port curl via PHP. You should con­firm this with your ISP.

    You know, I just added a phpinfo.php file to the zip.

  29. 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 […]

  30. Martin said on January 11th, 2008 at 8:36 am:

    Hi Brian,

    You where right, it was the Curl. Unfor­tu­nately my host wont be upgrad­ing any­time soon. So have to find another solu­tion for this. Thanks for your help and the script!

  31. Andrew said on January 14th, 2008 at 12:04 am:

    Thanks so much for putting together all this great infor­ma­tion and code on restyling the Google Cal­en­dar — super helpful!

    I see­ing two odd­i­ties though and hop­ing some­one has a suggestion…

    1) When you click on a cal­en­dar event and the bub­ble pops up with more detailed infor­ma­tion about the event, the ‘Add to Cal­en­dar’ link points to http://www.mysite.com/calendar/event?action=.… instead of point­ing to http://www.google.com/calendar/event?action=.…

    2) On the month view, the drop down arrow only dis­plays on a mouse move­ment on top of it. If you just hover the cur­sor on top of the arrow, it dis­ap­pears. So it looks like it is flash­ing rapidly when you move the arrow over it. It’s like a mouse move event is trig­ger­ing the right style and then all of a sud­den it jumps back to the pre-mouse over state. I’d be happy with fig­ur­ing the right style to set display:none and get rid of it all together too.

    Both of these have hap­pened before I’ve mod­i­fied any of the style sheet tags.

  32. Judd said on January 14th, 2008 at 1:01 pm:

    I would also be inter­ested in see­ing the ‘Add to Cal­en­dar’ bug fixed.

  33. Brian said on January 14th, 2008 at 1:06 pm:

    Sure thing. I’ll have a look tonight after work.

  34. Brian said on January 14th, 2008 at 8:30 pm:

    OK the bug should be fixed. The zip file has been updated with a newer .php and .js file. The PHP file has direc­tions on what needs to be changed in the .js file in case you need down­load it again. In short, this is the change:

    f.put(“baseUrl”,c);

    to

    f.put(“baseUrl”,“http://www.google.com”);

  35. Ralph said on January 17th, 2008 at 12:29 pm:

    Hey Brian,

    I’ve got a sim­ple prob­lem but my trou­bleshoot­ing has not yielded any suc­cess­ful results. I’ve got a few images not show­ing up on the cal­en­dar, which you can view at the bot­tom of this screen http://www.winefinders-usa.com/Wines/France/colonial.html. I’m bet­ting it’s the effect of an incor­rect imagepath vari­able some­place but I can’t seem to find in any of the code where the js looks for the images in. Can you help?

    1. I’ve got one set of the images in root
    2. I’ve got one set in root/images
    3. I’ve got one set in root/calendar/images
    4. I’ve got one set in the folder where the html page resides as well

    Still, nada. Any­thing you can offer would be appreciated.

    Thanks,
    Ralph

  36. Brian said on January 17th, 2008 at 3:19 pm:

    Look­ing at the image prop­er­ties of each image (they’re eas­ier to see in IE), the images should be in root/images. You may need to clear your cache and refresh the browser to make the images appear. If you right click a miss­ing image, you can always select View Image in Fire­fox and it will load just that image. That way when you hit refresh, you bypass the page cache.

  37. Bobby said on January 20th, 2008 at 8:53 pm:

    Hi and thanks for the code — it’s awesome!

    I’m not very versed in js or PHP and I’m hon­estly just not sure how to pass the para­me­ters I want, like showtab=0, etc. I just want the month to show and not the week or agenda.

  38. Brian said on January 20th, 2008 at 9:16 pm:

    It’s pretty easy. Your basic iframe will look like this:

    <iframe src=“MyGoogleCal2.php?src=user%40domain.tld”></iframe>

    To turn off the tabs change it to this

    <iframe src=“MyGoogleCal2.php?showTabs=0&src=user%40domain.tld”></iframe>

  39. Bobby said on January 21st, 2008 at 10:40 am:

    THAT did it!!! Thank you very much. I was try­ing to put them into the PHP then I saw a post­ing from you that said not to mess with the PHP.

    One more question.

    The only color I haven’t been able to change was the grid for the cal­en­dar month view. It still shows up as a light blue. Do you know where the prop­erty is for these lines?

    Thanks again!

  40. Bobby said on January 23rd, 2008 at 2:44 pm:

    I actu­ally solved my own prob­lem and got the grid­line color changed. Ever­ty­hing looks good now except the actual even as it shows on the cal­en­dar. The event title has only the first few char­ac­ters show­ing. Can I have some kind of word-wrap??

  41. Brian said on January 24th, 2008 at 4:18 pm:

    Bobby,

    I’m guess­ing the cal­en­dar isn’t wide enough to show the name of a single-day event. If that’s the case, increase the width of the iframe by set­ting it’s width attribute and option­ally the height attribute. The Google Cal­en­dar should stretch to auto­mat­i­cally fill the whole iframe.

  42. Mattes said on February 5th, 2008 at 5:58 am:

    Hi! First of all! Great job!
    All works fine for me, BUT: I´ve got a prob­lem with the query string.
    I get my cal­en­dar in eng­lish but I try to get it in ger­man. So I added
    hl=de& to the string. Now it looks like:

    <iframe src=“G_CalenderTTV.php?title=Termine%20TTV%20Reicheneck&height=500&wkst=2&bgcolor=%23ffffff&hl=de&src=13a90kbah1enp…

    Whats wrong?

    PS: look at http://www.ttv-reicheneck.de/home/kalender.php

    THANKS!

  43. Brian said on February 5th, 2008 at 2:18 pm:

    Mattes,

    There’s noth­ing wrong with the query string. The query string attribute “hl” deter­mines which Javascript file to down­load. Unfor­tu­nately, I reverted the code back to the old style of using a cus­tomized Javascript file in order to fix other major prob­lems. As a con­se­quence, the “hl” vari­able is more or less ignored, because the local­ized Javascript file spec­i­fied by the “hl” vari­able is over­writ­ten by the cus­tom ver­sion stored on your web server, namely mygooglecal.js which was included in the ZIP file.

    So in order to get a local­ized ver­sion of the cal­en­dar UI, you have to first down­load the local­ized Javascript file. The exact pro­ce­dure is described in the com­ments. The only change you need to make is to add “hl=de&” to the query string in step 1. Then make the edits to the Javascript file as described in the comments.

  44. mhyder1 said on February 18th, 2008 at 1:36 pm:

    Ive been hav­ing trou­ble. the site im try­ing to imple­ment is http://www.ggchigamma.org/events.html. I get noth­ing on the page. just blank. but the same code on my test site http://www.hytechsupport.com/gamma/events.html seems to work fine. what am i doing wrong? I guess one of the servers are con­fig­ured dif­fer­ently than the other.

  45. Brian said on February 18th, 2008 at 11:09 pm:

    mhy­der,

    It looks like you fixed the prob­lem on your own, though you have not yet cus­tomized the stylesheet. If the cal­en­dar is blank, that usu­ally means it’s a PHP con­fig­u­ra­tion error, typ­i­cally the curl mod­ule is missing.

  46. Jon said on February 19th, 2008 at 5:28 am:

    IE7 and the datepicker problems.

    using IE7 on Vista: When I hover over the month/year in the top nav­i­ga­tion, all info in the cal­en­dar dis­s­ap­pears! I’ve looked at sev­eral sites imple­ment MyGoogleCal2 and they all seem to have the same bug.

  47. Brian said on February 19th, 2008 at 8:50 am:

    Thanks Jon, for find­ing that bug. Unfor­tu­nately, I don’t have Vista. (I don’t plan to either any­time soon—Macbook, Dell m1330 w/Ubuntu or sim­i­lar lap­top is more likely in my future.) So, I can’t con­firm if the bug is fixed or not, but I’m very con­fi­dent the bug is because of a miss­ing image, namely:

    http://www.google.com/calendar/images/menu_arrow_hover.gif

    Throw that in your MyGoogleCal2 images folder and you should be good to go. I’ve already updated the .zip file.

  48. mhyder1 said on February 19th, 2008 at 2:19 pm:

    How can i check if my server sup­ports curl? thanks

  49. Brian said on February 19th, 2008 at 7:43 pm:

    The .zip file con­tains a file called phpinfo.php. Sim­ply put that file on your web server and load that file in your browser. It should list the mod­ules installed.

  50. Jon said on February 20th, 2008 at 12:04 am:

    IE7 and the datepicker prob­lem — SOLVED!

    Brian, I’d already tried the ‘menu_arrow_hover.gif’ idea — didn’t work!

    Google have updated their CSS — this seems to solve the problem.

    I’ve also man­aged to get event titles to wrap Ref Bobby’s post(40).(tested with Fire­fox 2.0.0.12 & IE7 on Vista):

    Solu­tion:
    1. Get Google’s lat­est CSS
    2. find .mon­thview .event and remove “whitespace:no-wrap;“
    3. find .IE7 .mon­thview .all­dayevent and change “height:1.4em” to
    “min-height:1.4em”

  51. Jon said on February 20th, 2008 at 12:45 am:

    con­tin­ued from pre­vi­ous post because I for­got to add this:
    4. at the bot­tom of the CSS file add:
    .mon­thview .all­dayleft­side .event­ti­tle {white-space:nowrap}
    .mon­thview .all­dayright­side .event­ti­tle {white-space:normal !important}

  52. Thomas said on March 6th, 2008 at 1:04 pm:

    I’ve looked through both posts and all the com­ments, but I don’t see any­where that tells specif­i­cally which prop­erty in the css to update to change the nasty blue grid color. If I just knew the hex value for that color that would be enough to find and change it. I’ve changed all kinds of hex val­ues in the css file and it has had zero effect on the cal­en­dar so I’m not even sure what it’s doing.

  53. Brian said on March 6th, 2008 at 4:14 pm:

    Thomas,

    I rec­om­mend installing the Fire­bug exten­sion for Fire­fox and make use of its Inspect fea­ture. It’s very handy in help­ing to iden­tify ele­ments on a page and what styles are applied to those ele­ments. That said, some of the col­ors that the Google Cal­en­dar uses are: #c3d9ff, #bcd, #cde, #e8eef7, #e5ecf9, and #112abb. You can locate these in the .css file.

  54. Brad said on March 7th, 2008 at 8:28 pm:

    Great Script — I need to make this cal default to Agenda Mode. Have tried sev­eral times to no avail. can this be done?

  55. Brian said on March 7th, 2008 at 11:14 pm:

    Brad,

    Are you unable to use “mode=AGENDA” in the query string? Like so…

    MyGoogleCal2.php?src=user%40domain.tld&mode=AGENDA

    There’s a list of query string para­me­ters in the com­ment sec­tion of the script. You can use them to adjust the out­put of the calendar.

  56. Brennan said on March 12th, 2008 at 9:09 am:

    So I’m very very new to this but really need to change the col­ors on my google cal­en­dar. Is there any kind of step by step instruc­tions on how to imple­ment every­thing? Any help I could get would be amazing!!!

  57. Thomas said on March 12th, 2008 at 7:20 pm:

    Thanks, it was the #112abb color that is the baby blue. Also, the css already has a back­ground color for the Week/Month/Agenda tabs, but you can add a “color:#??????” to it to change the color of the text on those tabs. Just search for .view-tab-unselected and .view-tab-selected.

  58. Mike said on March 12th, 2008 at 9:48 pm:

    Just wanted to link peo­ple try­ing to cus­tomize their cal­en­dars to this:

    http://mabblog.com/cssoptimizer/uncompress.html

    Found from google for “uncom­press css”

    That script makes it a lot eas­ier to read through all of the css from google.

  59. Mike said on March 12th, 2008 at 10:13 pm:

    I’m hav­ing trou­ble fig­ur­ing out how to get the Print or Add Cal­en­dar but­tons work­ing. What was your solu­tion to this?

  60. Brian said on March 14th, 2008 at 10:20 pm:

    Mike,

    Google changed the Javascript code again. I’ve updated the included .js file inside the .zip file. I also added the icon_print.gif to the zip as well. I updated the PHP file but only in the com­ments sec­tion, in order to update the needed Javascript mod­i­fi­ca­tions. That should take care of your Print button.

    As for the Add Cal­en­dar but­ton, you need to use the .htac­cess file. It con­tains a rewrite rule to han­dle this. See com­ment #16.

    Thanks for the uncom­press link. That’ll surely help the read­ers (and myself) immensely.

  61. Travis Dahl said on March 19th, 2008 at 4:17 pm:

    Hey Brian,
    Just when I think every­thing is fine again, it looks like google changed things up again. SO i find myself here again. in fire­bug I am get­ting a JS error that says “window._init is not a func­tion” you can see it here. This is the con­tents of my Iframe.
    http://www.thedesigncoalition.com/blog/calendar/MyGoogleCal2.php/embed?showTitle=0&showNav=0&showDate=0&showTabs=0&showCalendars=0&height=200&wkst=1&bgcolor=%23000000&src=b51c84hj7tvb06sp55ps2o5e1o%40group.calendar.google.com&color=%23AB8B00
    Any Ideas?

  62. Brian said on March 21st, 2008 at 8:14 pm:

    Hey Travis,

    I sup­pose you missed my post, but I updated the .zip file last week. Try giv­ing that a go. Also there’s a mis­take in your iframe src attribute. You should remove the ‘/embed’ between ‘MyGoogleCal2.php’ and ‘?’.

  63. Brian said on March 21st, 2008 at 11:37 pm:

    Small bug fix. I updated the .htac­cess file to fix many of the links like Print and Add to Cal­en­dar. I for­got to include this in the .zip file last week.

  64. Brian said on March 22nd, 2008 at 10:17 pm:

    Bren­nan,

    Sorry I’m a bit late in get­ting to your request, but if you haven’t noticed, there was a bunch changes I imple­mented, and I needed to fin­ish that first. I wrote-up a set of step-by-step instruc­tions in a new post. Hope­fully, that’ll help you out.

  65. Chris said on April 5th, 2008 at 2:42 am:

    Hi,

    I have recently down­loaded your excel­lent code to restyle my Google cal­en­dar and in Fire­fox every­thing is hunky­dory except the issue of adding calendar’s which isn’t a big issue for me. How­ever on vista/IE7 when I try to use the next or pre­vi­ous but­tons to nav­i­gate through the months on the Google cal­en­dar it just hangs with the red load­ing.… image dis­played. This is a real pain as like I said, Fire­fox is work­ing per­fectly, unfor­tu­nately my client and audi­ence will no doubt be mainly using IE7. Is this a known issue to you? I would appre­ci­ate any sug­ges­tions you may have, to see my cal­en­dar nav­i­gate to the club events page on the nav menu. I know this is short notice but I am look­ing to deliver the cal­en­dar page on Sun­day 6÷4÷08.

    Thanks,

    chris

  66. Brian said on April 5th, 2008 at 8:26 pm:

    Chris,

    This is the first report I have regard­ing this error, but I did con­firm it. I get a run­time error in IE7 on Win­dows XP. Works in Fire­fox and Opera.

    Since you’re on such a tight dead­line, a workaround is to add &showNav=0&showDate=0 to the query string to hide the nav­i­ga­tion for chang­ing the date. If you want to include the name of the month, you can use PHP to dynam­i­cally change the title query string vari­able. Mean­while, I’ll inves­ti­gate, but I can’t guar­an­tee I’ll be able to do it by tomor­row. Once I fix the bug, you can re-enable those fea­tures for your client at a later date.

    Thanks for the bug report and I’ll keep you posted.

    P.S. The email you sup­plied bounced back, so hence the late reply in the com­ments section.

  67. Chris said on April 6th, 2008 at 2:30 am:

    Sorry Brian,
    I have updated my email address so it should be cor­rect. I appre­ci­ate your effort.

    Thanks
    Chris

  68. Karena said on April 9th, 2008 at 8:21 am:

    Brian,
    Thanks for all the hard work on a great script! I just want to con­firm that I have the same error as Chris where it just hangs in IE7 with the red Load­ing… box up. In fire­fox it works but noth­ing i do in IE gets past that. Also, I added the &showNav=0&showDate=0 to the query string but it did not help in IE. I’ll keep watch­ing for any updates!

    Thanks,
    Karena

  69. Mike said on April 10th, 2008 at 3:08 pm:

    I have the same Load­ing hang issue when click­ing the Agenda tab as well. I found the prob­lem exists on IE6, IE7 and Safari. Works great on Fire­fox and Opera.

    Does any­one know how to remove the Agenda tab?

    This script is great, thanks!

  70. Brian said on April 10th, 2008 at 9:37 pm:

    All,

    Find­ing time this week to work on the bug has been a bit tough. So all I can say is stay tuned.

    Mike,

    To hide all the tabs, set the query string vari­able showTabs=0. Hid­ing just the Agenda tab is a bit more com­pli­cated, and I have yet to try it. From a cur­sory look of the HTML using Fire­bug, the Agenda tab has no ID attribute for easy selec­tion. The tab itself appears to be a <td> ele­ment. It is con­tained in a nested table inside a <td> tag with the ID, “calendarTabs1”. So if you can use the var­i­ous CSS or DOM selec­tors (e.g. last-child) to iso­late that tag, then you can set the dis­play style to none. Another pos­si­bil­ity is to set the dis­play style to none for the last-tab class. It’ll prob­a­bly leave a space, but it should remove the three <div>s inside the tab and achieve the desired effect.

  71. Steve said on April 11th, 2008 at 6:56 am:

    Brian,
    Absolutely fan­tas­tic! Thanks for this won­der­ful script!

    I am expe­ri­enc­ing one strange prob­lem. Namely, I’m try­ing to pub­lish one of Google’s pub­lic cal­en­dars and it won’t show up. The only thing I can see is that their source address is a dif­fer­ent for­mat than any other I’ve seen. Here it is: src=p%23weather%40group.v.calendar.google.com . Any clues why this might not be working?

    Best,
    Steve

  72. Tim Myers said on April 18th, 2008 at 12:40 pm:

    Are there step by step direc­tions to edit and save files? I need to know where to put the files after I edit them. There seems to be no change after I edit the files or I get a blank page.

    Tim

  73. Brian said on April 18th, 2008 at 4:20 pm:

    Tim,

    Please see my post How To Install MyGoogleCal.php

    Steve,

    I was able to load the title of the cal­en­dar, but like you I saw no events. I would first check to see if the events are indi­vid­u­ally set to private.

  74. Kelli said on April 25th, 2008 at 9:00 pm:

    I’m hav­ing the same issue as those above…in IE6 and IE7, I get hung up on “Load­ing” in the month nav­i­ga­tion. Things are hunky-dory in Fire­fox and Safari. I have to be able to nav­i­gate since my client really doesn’t have many events in any given month! Any ideas on a fix for this yet?

    Thanks for all the hard work!!!

  75. Moschops said on September 24th, 2008 at 2:08 pm:

    Unfor­tu­nately it seems Google cal­en­dar broke some­thing in the last few months — I get a “Load­ing” image where the cal­en­dar should be and it just hangs. I have no prob­lem embed­ded my cal­en­dar with­out the script so it isn’t Google hanging.

  76. Erica said on September 26th, 2008 at 6:46 pm:

    In IE6.0 can you tell me how to get rid of the “Google Logo” and “Cal­en­dar Title?” They both show up above the cal­en­dar and are cut­ting off the bot­tom sec­tion of the cal­en­dar. I just need to remove them both. Is there a way?

    Thanks.

  77. Erica said on September 27th, 2008 at 12:53 am:

    Never mind, I was able to remove the “Google Logo” and “Title.” Saw it posted pre­vi­ously on this site, thanks.

  78. Emynd said on November 11th, 2008 at 9:23 am:

    My cal­en­dar is no longer show­ing up and just says “load­ing…” on my page (crossfadedbacon.com). It was work­ing sev­eral days ago and as far as I know, I didn’t change any­thing on my end. Any advice?

    –e

  79. Anmari said on November 19th, 2008 at 10:42 pm:

    I had quite a bit of fun tak­ing this quite a bit fur­ther. For a while now I had been intend­ing to use google cal­en­dar (or some such ical tool) to help me with the annual fam­ily year cal­en­dar project (I pre­pop­u­late it with all sorts of dates and the ical tools allow one to over­lay the cal­en­dars so nicely).

    But google cal­en­dar did not offer quite enough cus­tomi­sa­tion options. Then I found this post. thanks!!!.… and it gave me the idea and I got a bit car­ried away.…

    Any­way if you have not yet done your christ­mas shop­ping and do have some of your photo’s that are halfway decent lying around, you could have a go at a flickr / google cal­en­dar mashup per­haps — using my script over at:
    http://webdesign.anmari.com/gift-photo-calendar/

Subscribe to this post/thread