Restyle Google Calendar 3

<?php
/*******************************************************************************
 * FILE: MyGoogleCal3.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal3.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:
 *   21 June     2008 - Reverted to an older custom JavaScript file
 *   18 May      2008 - Corrected a bunch of typos 
 *   24 April    2008 - Original release
 *                      Uses the technique from MyGoogleCal for IE browsers and
 *                      the technique from MyGoogleCal2 for the rest.
 *   
 * ACKNOWLEDGMENTS:
 *   Michael McCall (http://www.castlemccall.com/) for pointing out "htmlembed"
 *   Mike (http://mikahn.com/) for the link to the online CSS formatter
 *
 * 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 it's easier to edit.
 */
$stylesheet = 'mygooglecal3.css';

/* For the IE stylesheet replace "embed" with "htmlembed" in step (1) 
 */
$stylesheet_ie = 'mygooglecal3ie.css';

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

// URL for the calendar
$url = "";
$is_ie = FALSE;
if(count($_GET) > 0) {
  if(stristr($_SERVER['HTTP_USER_AGENT'], 'msie') === FALSE) {
    $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
  } else {
    $url = "http://www.google.com/calendar/htmlembed?" . $_SERVER['QUERY_STRING'];
    $is_ie = TRUE;
  }
}

// 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);

if($is_ie) {
  // Fix hrefs, image sources, and stylesheet
  $pattern = '/(href="render)/';
  $replacement = 'href="http://www.google.com/calendar/render';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(href="event)/';
  $replacement = 'href="http://www.google.com/calendar/event';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(http:\/\/www.google.com\/calendar\/htmlembed)/';
  $replacement = 'MyGoogleCal3.php';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(src="images)/';
  $replacement = 'src="http://www.google.com/calendar/images';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(<link.*>)/';
  $replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet_ie . '" />';
  $buffer = preg_replace($pattern, $replacement, $buffer);
} else {
  // 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="MyGoogleCal3js.php?$1"';
  $buffer = preg_replace($pattern, $replacement, $buffer);
}

// display the calendar
print $buffer;
?>

35 Responses to “Restyle Google Calendar 3”

1. paolo said on May 11th, 2008 at 9:00 am:
   

   In the MyGoogleCal3.php in the zip there is a small error. It still uses ‘mygooglecal2.css’;

   $stylesheet = ‘mygooglecal2.css’;
   $stylesheet_ie = ‘mygooglecal2ie.css’;

   But in the zip the files included are
   ’mygooglecal3.css’ and ‘mygooglecal3ie.css’

   Thanks for a great work!

2. Tony said on May 16th, 2008 at 10:09 pm:
   

   Hey Brian,
   First of all THANKS for the code. What a life saver and exactly what I needed. I have spent soooo many hours (as you have I’m sure) tweak­ing my cal­en­dars to get them just right and just when I thought I was done I started notic­ing the JS errors in IE. I hopped back over to your blog and you had a post about the exact prob­lem. Great! I fol­lowed your instruc­tions but all the chrome stuff will not go away. I put up a test page here http://www.dcspride.com/caltest.php The first one is the plain embed­ded google cal­en­dar, the sec­ond one is MyGoogleCal2 cus­tomized for my site and the third is MyGoogleCal3. The IFRAME lines are exactly the same except for one points to MyGoogleCal2.php and the other to MyGoogleCal3.php. It works fine in Fire­Fox but not in IE. I have looked at this til my eyes are crossed and I need some­one else to look at it. What am I doing wrong? Why wont the tabs and google logo go away in ver­sion 3 (IE only)?

   I change only a cou­ple things in your code. In MyGoogleCal3.php (cor­rect me if I’m wrong in doing that but oth­er­wise it does not work at all)
   line 67 pointed to mygooglecal2.css (changed to mygooglecal3.css)
   line 71 referred to mygooglecal2ie.css (changed to mygooglecal3ie.css)
   line 108 ref­fereded to MyGoogleCal.php (changed to MyGoogleCal3.php)

   Here are the pages I am work­ing on.
   http://dev.dcspride.com/ (I need the agenda for this page)
   http://dev.dcspride.com/calendar/ (here is the full size cal­en­dar)
   Both of these pages are still run­ning MyGoogleCal2, Fire­fox works great, IE js errors

   UPDATE: After read­ing through some of the com­ments on your site I added &chrome=NAVIGATION to the MyGoogleCal3 cal­en­dar on the test page. The logo is gone now but the tabs and all are still there.

   Thanks again and I hope you can help me.
   Tony

3. Brian said on May 18th, 2008 at 9:23 pm:
   

   Sorry all for the late reply… been busy with moon­light­ing with free­lance work so I’ve had lit­tle time for the blog. In my rush to get ver­sion 3 out, I left a few typos. Glad it wasn’t any­thing some­one couldn’t fig­ure out. Thanks paolo! I’ve updated the zip file with the corrections.

4. Steve said on June 8th, 2008 at 2:55 am:
   

   First — amaz­ing job on the Google Cal­en­dar styling script. Won­der­ful. I do have what I hope is a quick ques­tion: I seem to be hav­ing trou­ble in IE 6 & 7. The code and CSS work for both IE and FF/Other, but the nav­i­ga­tion that is dis­played on the cal­en­dar is dif­fer­ent for IE (and &chrome=navigation doesn’t seem to have an effect). The prob­lem is that the IE ver­sion lacks the drop-down menu which selects which cal­en­dars to dis­play, as well as the “week” option from “week/month/agenda.”

   You can see the test in action here:
   http://www.itpdev.org/calendar.php

   I’ve been doing some pretty seri­ous styling (and I’m hav­ing a ball with it thanks to you), but the big sell­ing point on Google for my boss was to have mul­ti­ple cal­en­dars that could be switched on and off. If that doesn’t work, I dunno, he shoots me in the face or something.

   I’d appre­ci­ate any response at all — even if it’s just, “I have no idea.”

5. Brian said on June 8th, 2008 at 8:36 am:
   

   Hi Steve,

   GC3 uses the old HTML-based Google Cal­en­dar for IE because for what­ever rea­son, styling causes a JavaScript error when nav­i­gat­ing to a dif­fer­ent date range when using the JavaScript-based Google Cal­en­dar. It’s unable to load addi­tional events. This is why the IE ver­sion looks dif­fer­ent and has less fea­tures. To make the nav­i­ga­tion go away, use &chrome=none. Beyond that, you have a choice with liv­ing with less fea­tures but a fully work­ing IE cal­en­dar or an IE cal­en­dar with bro­ken navigation.

6. Steve said on June 8th, 2008 at 10:34 pm:
   

   That’s a shame. It’s incred­i­ble how IE just always man­ages to be evil, even in new ver­sions. For the time being, I have two cal­en­dars, and so will be pro­vid­ing IE-only links (links that are display:none except in the IE style sheets) that will pro­vide links to a PHP page that has only Cal­en­dar A spec­i­fied in the , then another one that has Cal­en­dar B, and one that has Cal­en­dars A+B.

   This obvi­ously becomes imprac­ti­cal once the num­ber of cal­en­dars goes past two, as the per­mu­ta­tions get too vast.

   My sug­ges­tion for a workaround for the JS prob­lem would be a PHP check­box form that changes the src= of the to include/disclude what­ever src= the user needs, and then refresh the page. It’s not quite as slick as the instantly-disappearing JS, but would func­tion basi­cally the same way.

   I am not a PHP pro­gram­mer, how­ever, and so can’t write it myself.

   I would like to reg­is­ter my incredulity that Google doesn’t let users eas­ily make these mod­i­fi­ca­tions. It seems like such a basic neces­sity for web designers.

7. Steve said on June 8th, 2008 at 10:36 pm:
   

   &lt iframe &gt was omit­ted in the above post.

   It should say:
   “Cal­en­dar A spec­i­fied in the &lt iframe &gt, …”

8. Birkley said on June 12th, 2008 at 1:20 pm:
   

   Wow, this is pow­er­ful. I’m part of a dance com­mu­nity and want to cre­ate a com­mu­nity cal­en­dar. Google Cal­en­dar is the best option, but I’ll want to inte­grate it visu­ally bet­ter for my new website.

9. Tony Gray said on June 20th, 2008 at 3:50 pm:
   

   Hey has this hap­pened to any­one else? My cal­en­dars just stopped work­ing today…stuck on load­ing. http://www.dcspride.com and http://www.dcspride.com/calendar. Did google go off and change some­thing again?

10. Justin said on June 20th, 2008 at 5:28 pm:
    

    I just noticed today that the AGENDA mode is no longer work­ing. I have checked a few of the cal­en­dars that are linked from this page and it seems to be affect­ing oth­ers as well. Any thoughts on what the prob­lem may be. I have updated the css file and have been going through that most of the after­noon. I have gone back to the “nor­mal” google cal­en­dar for the time beong. Any thoughts or ideas will be appre­ci­ated. Thanks for all your hard work.

11. Tom said on June 21st, 2008 at 3:35 pm:
    

    Pretty cool code. I’ve been look­ing for some­thing like this for a while. How­ever, it would be great if the AGENDA mode worked. Has any­one been able to fig­ure this out?

12. Brian said on June 21st, 2008 at 6:47 pm:
    

    Alright guys,

    I’ve uploaded a new ver­sion of the .zip file. The major change is:

    $replace­ment = ‘src=“MyGoogleCal3js.php?$1″’;

    to:

    $replace­ment = ‘src=“MyGoogleCal3.js“‘;

    Yes that’s a cus­tom Javascript file. See the update above for more info.

13. Tony Gray said on June 21st, 2008 at 10:26 pm:
    

    Thanks! That fixed it for me! You da man!

14. Steve said on July 3rd, 2008 at 10:15 am:
    

    Here’s a strange one: The update worked great for FF and IE, but Safari is still hav­ing the “Load­ing…” error. Any idea why it would either not see the .js or the change in general?

    Or does Safari just have the most stub­born cache of all time?

    The URL is http://www.itp.edu/calendar.php

15. Alicia said on July 7th, 2008 at 4:58 am:
    

    This is bril­liant and I’d love to imple­ment this on my site — but Steve, I’m hav­ing the same prob­lems as you in Safari with the Agenda view. It sim­ply won’t load; seems to run fine on other Mac OS X browsers though. Does any­one have a fix or a workaround? Thanks

16. annabanana said on July 9th, 2008 at 11:06 am:
    

    This is just what I needed to help cus­tomize our school web­site. I’ve got it work­ing pretty well in Fire­fox, but have some issues in IE (arrrgh). I can’t seem to get the title, tabs and Google beta image off the top of the cal­en­dar. Any ideas? Are the argu­ments some­how not get­ting passed in the IE rendering?

    http://montessoricelebration.com/calendar2.php is my test site

    THANKS!!!

17. Travis Dahl said on July 22nd, 2008 at 3:00 pm:
    

    I dont know how many times we are gonna have to do this but thanks AGAIN. My cal­en­dar is finally fixed (for the 3rd time) on my site. You are the best. You can see my styling and usage here (click on view cal­en­dar link):

    http://www.thedesigncoalition.com

18. Max Schaufler said on August 3rd, 2008 at 2:28 am:
    

    Hello,
    I have trou­bles get­ting other lan­guages to work. No mat­ter what I pass as hl-parameter, the cal­en­dar always gets loaded in Eng­lish! Are there any server para­me­ters that I have to take care of? If I load the URL in a sep­a­rate win­dow, it gets dis­played in the wanted lan­guage (Ger­man), but inside my page (called via curl) it gets dis­played in Eng­lish.
    Other than that, cus­tomiz­ing worked pretty fine, great work!
    Max

19. Max Schaufler said on August 5th, 2008 at 8:45 am:
    

    Lit­tle follow-up on the lan­guages:
    Found out they are hid­den in the javascript files, and not within the $buffer from curl_exec. For now I just went through the file and replace the text occurences.
    Greets,
    Max

20. John Mark Ellsworth said on August 23rd, 2008 at 12:05 pm:
    

    ANNABANANA… I was hav­ing the same prob­lem… then I read com­ment #5… I added “&chrome=none” as my first thing after the ini­tial ques­tion mark… and I was in busi­ness again.

    BRIAN (and still appro­pri­ate if mis­spelled BRAIN)… WOW!!! This is pow­er­ful, use­ful stuff. THANK YOU!!! Jeffk said in a com­ment on an ear­lier post that you were an “internet-dwelling saint” … and I agree!!! How can we thank you?!? I looked a lit­tle, but no “con­tribute” link, no list of good­ies to send… NOTHING! You deserve some­thing beyond just kudos!

    BRIAN, might you add the “&chrome=none” option onto list of “VALID QUERY STRING PARAMETERS” in the main MyGoogle­Cal file? I think it might be useful.

21. Brian said on August 23rd, 2008 at 7:05 pm:
    

    Thanks for the acco­lades. Unfor­tu­nately, with the sec­ond job, I haven’t had much oppor­tu­nity to improve the script (like han­dling IE bet­ter) and also pro­vid­ing sup­port. Thank­fully, there are enough com­ments and replies that cover most prob­lems peo­ple encounter.

    That said, if you want to leave a mon­e­tary dona­tion, click the “Leave a tip” but­ton which goes to my Pay­Pal account.

22. Annabanana said on August 24th, 2008 at 5:05 am:
    

    Thanks John Mark — that tag seemed to do the trick! Now I can play with more for­mat­ting and get rid of the blue — whoohooo! Great tool Brian!

23. Chris said on September 3rd, 2008 at 5:26 am:
    

    Hi there,

    Looks like google have changed their code gfor the JS side of things, I have man­aged to fix it for now, see below

    // Fix URLs in the javascript
    $pat­tern = ‘/this\.sc\+\“calendar/’;
    $replace­ment = ’”http://www.google.com/calendar’;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    // No longer needed by the looks of things
    #$pat­tern = ‘/put\(“baseUrl”,c\)/’;
    #$replace­ment = ‘put(“baseUrl”,“http://www.google.com”)’;
    #$buffer = preg_replace($pattern, $replace­ment, $buffer);

    Im going to make fur­ther changes so that the code locally cache’s the JS (maybe even the html) and keeps track of the MD5 of it. Tech­ni­cally if the md5 changes then google have changed their code. Get in touch if your inter­ested in a copy when I’m done.

24. Fetimo said on September 26th, 2008 at 3:44 am:
    

    This looks awe­some but I’m hav­ing some trou­ble with cURL, basi­cally after scratch­ing my head and look­ing at the code for a cou­ple of hours I read your MyGoogleCal2 and realised that I don’t have cURL installed. Could any­one help some­one with vir­tu­ally no PHP/ server-side knowl­edge install it? :<

    Thank you very much Brian for pitch­ing in where Google’s fallen short!
    Regards
    Fet

25. Mac said on October 2nd, 2008 at 11:44 am:
    

    Chris,

    How’s the progress going with the md5 check?

    I just dis­cov­ered this site yes­ter­day I spent the whole day read­ing all the com­ments and play­ing with all the ver­sions. Thanks so much Brian.

26. Alli said on October 14th, 2008 at 2:02 am:
    

    This is a great script and I have it work­ing well using FF but the iframe will not show in IE any sug­ges­tions what might be the problem?

27. Brian said on October 18th, 2008 at 1:46 pm:
    

    Could some­one tell me which ele­ment I need to edit in order to change the back­ground colour behind the cal­en­dar title? The style used is inline in the body tag.

    Thanks

28. Jeff said on October 27th, 2008 at 3:30 am:
    

    Pretty cool script. Awe­some Job.

    One thing I noticed, when I use the included javascript the date picker doesn’t have the hover effects and the cal­en­dar picker doesn’t drop down. But if I down­load a new javascript file those two items will work but then the cal­en­dar won’t change months. It get stuck with the load­ing indi­ca­tor show­ing. Any ideas of how I can get the best of both worlds?

29. Adam said on October 29th, 2008 at 7:17 am:
    

    Great script, I have been look­ing for some­thing like this for a long time. I did have a tip that I thought might be worth shar­ing. My gmail account has sev­eral cal­en­dars, but I only want to embed one of them on my web­site. In order to do this, I had to replace the “src=myuser@gmail.com” with the HTML pri­vate address avail­able in the “Cal­en­dar Details” tab of the gmail cal­en­dar set­tings. Doing so also solved another issue that I was hav­ing. I did not want to make my cal­en­dar pub­lic and search­able on google. Using the pri­vate address allows me to keep the cal­en­dar pri­vate but still post it on my web­site. Of course, the URL is con­tained within the HTML code, but I sim­ply password-protected my site (which I wanted to do any­way) and that solves the problem.

30. Mau said on November 11th, 2008 at 8:16 am:
    

    hi in this ver­sione Para­me­ter Locale not func­tion ! &hl=it

    Why?
    help me please..

31. Jason Viafora said on November 18th, 2008 at 3:02 am:
    

    This works great with fire­fox but I can’t seem to get the css file for IE to work with it? Are there any known bugs with IE and css configuration?

32. Jason Viafora said on November 18th, 2008 at 2:40 pm:
    

    Or could it pos­si­bly be a java script issue?

33. Andy said on November 20th, 2008 at 8:56 am:
    

    Jason–

    I’ve been hav­ing the same prob­lem with IE accept­ing any .css edits or even resiz­ing. It seems that the “http://www.google.com/calendar/htmlembed?” call is no longer work­ing like before, at least as far as cus­tomiz­ing is concerned.

    I’m cur­rently using the workaround by elim­i­nat­ing the nav­i­ga­tion from the IE side then run­ning it through java (like the other browsers) as nor­mal. It’s not ideal, but I just can’t get the old way to work.

34. apayne said on November 29th, 2008 at 10:30 pm:
    

    I am also see­ing load­ing within safari browser… Any fixes?

35. apayne said on November 29th, 2008 at 10:34 pm:
    

    I am also get­ting calendar.com when clicked on the Google badge near bot­tom? Any fixes? Thanks

Subscribe to this post/thread