I had sug­gested that my com­pany use Google Cal­en­dar to pub­lish events. It’s easy, it can be made pub­lic and share­able, and it beats fig­ur­ing out how to pub­lish an Outlook/Exchange cal­en­dar on the web. (From what I’ve read about Google Cal­en­dar, you can pub­lish mul­ti­ple cal­en­dars indi­vid­u­ally con­trol­ling the level of pri­vacy and publicity—ooo, maybe we can migrate away from Exchange…) Yet, the coolest part about Google Cal­en­dar is that you can embed it in your web page using an iframe which Google pro­vides a handy-dandy con­fig­u­ra­tor to gen­er­ate the HTML. The worst part about Google Cal­en­dar is that you embed it in your web page using an iframe.

UPDATE: New post on the new ver­sion of MyGoogle­Cal.

UPDATE: Around Sep­tem­ber 7, 2007, Google rolled out a JavaScript ver­sion of the embed­ded cal­en­dar. See Com­ments #71 and #72 for a workaround.

UPDATE: New post on how to restyle Google Cal­en­dar Gad­get.

An iframe is truly a page within a page from the start html tag down to the end html tag. There­fore it has it’s own sep­a­rate scope which means you can’t inherit styles from the par­ent page. If my company’s web site had a cerulean blue theme, then I wouldn’t really care. Unfor­tu­nately, the web site is col­ored var­i­ous shades of green. Clash-o-matic.

What’s the solu­tion? Use an inter­me­di­ary script to request the cal­en­dar doc­u­ment and then replace the stylesheet link with a link to my own stylesheet. Voila!

<?php
/*******************************************************************************
 * FILE: MyGoogleCal.php
 * 
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal.php"></iframe> 
 *   OR
 *  <iframe src="MyGoogleCal.php?src=user%40domain.tld"></iframe>
 *  
 *  where user@domain.tld is a valid Google Calendar account.
 *
 * HISTORY:
 *    8 September 2007 - Changed calendar URL to use "htmlembed" instead of 
 *                       "embed" since Google switched to using JavaScript
 *                       to generate the calendar.  
 *                       (Credit: Michael McCall http://www.castlemccall.com/)
 *   18 November 2006 - Simplified $query code block to read original query
 *                      string, rather than rebuilding it.  Doing it this way
 *                      allows the combination of multiple calendars.
 *    7 October  2006 - Original release
 *
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com  
 ******************************************************************************/

/* URL for overriding stylesheet
 * The best way to create this stylesheet is to load the embedded calendar in a
 * browser, view the source, determine the URL of the stylesheet, load the
 * stylesheet in the browser, and then save the file or copy and paste into an
 * editor.  Edit this new file to change the style of the calendar.
 * NOTE: There are (4) relative image URLs that must be changed to absolute URLs 
 * in the compiled Google stylesheet.
 */
$stylesheet = '/css/mygooglecal.css';

/* Default URL
 * This is the embeddable public address for the calendar.  If this value is an
 * empty string, then the script will return a blank page if a valid query 
 * string is not submitted. This URL will typically be of the form
 *
 *   http://www.google.com/calendar/htmlembed?src=user%40domain.tld  
 *
 * where user@domain.tld is a valid Google Calendar account
 */
$url = "";

// If a query string is supplied, pass it along to Google.
$query = "";
if(count($_GET) > 0) {
  $query = $_SERVER['QUERY_STRING'];
  $url = "http://www.google.com/calendar/htmlembed?" . $query;
}

// Request the calendar
$buffer = "";
$fd = fopen ($url, "r");
while (!feof ($fd))
    $buffer .= fread($fd, 8192);
fclose ($fd);

// 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 = 'MyGoogleCal.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 . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

If you already have an embed­ded cal­en­dar, just put this script on your web site and change the iframe src attribute to point to this file with the same query string and it should work. You will get an unstyled cal­en­dar. Down­load and save the stylesheet for your Google Cal­en­dar to your web site, update the $stylesheet vari­able, reload the page and your cal­en­dar is styled. Now edit the stylesheet to make it bet­ter integrated.

Ques­tions, sug­ges­tions, bugs, etc. email or leave a comment.

  • How do I color-code events from dif­fer­ent cal­en­dars? This is a work-in-progress. It’ll be done when it’s done. Tips (see link below) will encour­age me to fin­ish it faster. :) If you do leave a tip because you want this fea­ture, please indi­cate that in the Item text field.

  • How do I down­load the stylesheet? See Com­ment #5.

  • How do I change the cal­en­dar images, for exam­ple, the but­tons? See Com­ment #8.

  • How do I get mini-mode to work? You don’t. See my post on how to restyle Google Cal­en­dar Gad­get.

  • No, I don’t like Google Cal­en­dar Gad­get. I want to restyle the cal­en­dar in mini mode. See Com­ment #16.

  • My web host dis­abled fopen() or I think fopen() is not secure enough so I’d pre­fer curl(). See Com­ment #20.

  • How do I get rid of the Google logo? See Com­ment #24.

  • How do I get the event details to appear in a pop-up win­dow? See Com­ment #27.

  • How do I change the back­ground color? See Com­ment #64.

  • HELP! My cal­en­dar dis­ap­peared! All I can see is the title (and a JavaScript error)! What do I do? See Com­ments #71 and #72.

110 Responses to “Restyle Google Calendar”

  1. Travis Dahl said on October 8th, 2006 at 6:08 pm:

    Hi Brian,

    this is exactly the sug­ges­tion I was mak­ing to the devel­op­ers of the embed­d­a­ble min­i­mode cal­en­dar. Just one ques­tion. I fol­lowed all of your instruc­tions but I am get­ting this error still.

    Warn­ing: preg_replace() [function.preg-replace]: Unknown mod­i­fier ‘/’ in /home/thedesig/public_html/blog/calendar/MyGoogleCal.php on line 82

    the url is:
    http://thedesigncoalition.com/blog/calendar/google.html

    and all the other files are in the same direc­tory “calendar”

    does this line:
    $replace­ment = ‘MyGoogleCal.php’;

    need to be an absolute path? I tried it both ways and it didnt work so i know there is another prob­lem but I was just curious.

  2. Brian said on October 8th, 2006 at 7:15 pm:

    That error means there was an unescaped slash char­ac­ter in a reg­u­lar expres­sion. This was caused by Word­Press’ post editor.

    The offend­ing line was:

    $pat­tern = ‘/(http://www.google.com/calendar/embed)/’;

    I’ve changed it to

    $pat­tern = ‘/(http:\/\/www.google.com\/calendar\/embed)/’;

  3. Travis Dahl said on October 10th, 2006 at 7:55 pm:

    Great I got it work­ing now.I want to be the first to know when you get it work­ing with min­i­mode. Keep up the great work

  4. adam pope said on October 11th, 2006 at 12:27 am:

    I’ve tried it, and checked out Travis’s efforts too, but my cal­en­dar doesn’t seem to want to load. Is this due to the php set­tings? Ought http://www.informationhandyman.com/MyGoogleCal.php come up with a page? Is there any­thing within the php file I need to change as some of the com­ments seem to sug­gest or should it just come up with an unstyled cal­en­dar? Thanks for your patience…

  5. Brian said on October 11th, 2006 at 9:17 am:

    Adam,

    If you are not going to sup­ply a query string like so:

    MyGoogleCal.php?src=user%40domain.tld

    Then you have to set the $url vari­able in the script to default to your cal­en­dar. See the script com­ment regard­ing $url for the proper format.

    While you’re styling your cal­en­dar it helps to have both your Google cal­en­dar open in one tab/window and your MyGoogle­Cal open in another tab/window. You need the Google ver­sion open so that you can view the source and deter­mine where to down­load the CSS file. It’ll look some­thing like:

    embed/20061006000432embedcompiled.css

    That num­ber is a time stamp and so it may be dif­fer­ent for your cal­en­dar. To down­load the CSS file, just copy and paste the rel­a­tive URL into your browser address field and add http://www.google.com/ to the front of it and hit enter. Then select File->Save. Rename the file, set the $stylesheet vari­able to point to it, and edit away.

  6. Travis Dahl said on October 12th, 2006 at 9:58 am:

    hey every­body,
    I got my cal­en­dar styled and up on my site. check it out. http://www.thedesigncoalition.com/

  7. bennie said on November 12th, 2006 at 9:37 am:

    Is there any way to change this code to replace the images too with your own. Such as on Travis’s page if you turn nav­i­ga­tion on Then the images don’t go with the site.

    http://www.thedesigncoalition.com/blog/calendar/MyGoogleCal.php/MyGoogleCal.php

    By the way thanks alot for the script this helps a bunch.

    Thanks
    Bennie

  8. Brian said on November 13th, 2006 at 11:30 am:

    Ben­nie,

    Yes, you can change the code to replace images as well. The default images are served by google.com, hence the lines:

    $pat­tern = ‘/(src=“images)/’;
    $replace­ment = ‘src=“http://www.google.com/calendar/images’;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    You just need to com­ment these lines out or change $replace­ment to point to a folder where your images are stored. Then all you need to do is cre­ate the images and save them to that folder. If you use the com­ment method, the folder is an “images” sub­folder of the folder that con­tains the PHP script. Of course you’ll have to use the same names Google uses, e.g. btn_prev.gif for the pre­vi­ous button.

  9. Bennie said on November 17th, 2006 at 8:51 pm:

    Thanks alot brian that really helped!!!

    Now I have another ques­tion. This one is hard to explain

    We took and add src’s for each of our cal­en­dars in the url which works fine until you press the next month but­ton. It then only shows the last cal­en­dar from then on. But if you do the url with google as the url with no php script it works fine. But when you do the script it works with only the url that is encoded in the php page.

    here is my script

    http://rlchome.org/googlecal/MyGoogleCal.txt

    Here is the page

    http://rlchome.org/googlecal/MyGoogleCal.php

    Here is the same page but with­out the script
    http://www.google.com/calendar/embed?src=brenda%40churchthatcares.org&amp;…

    Sorry about the long links.

    But as you can see in the last link I have many srcs which com­bines the shared cal­en­dars into one huge shared calendar.

    Do you have any ideas on why this doesn’t work with your script?

    Thank you so much for your time
    Bennie

  10. Bennie said on November 18th, 2006 at 8:42 am:

    Hi Brian,

    Ok I think I have the above fixed by using the query sec­tion, but it only works for the month and when you add the vari­able mode=AGENDA it doesn’t go to agenda it only goes to month.

    Here is my source
    http://rlchome.org/googlecal/MyGoogleCalAgenda.txt

    here is the page that is sup­posed to be the agenda.
    http://rlchome.org/googlecal/MyGoogleCalAgenda.php

    Here is my cal­en­dar in month mode.
    http://rlchome.org/googlecal/MyGoogleCal.php

    Also Why does it some­times ren­der in mil­i­tary time. Do you have any idea why?

    Thank you so much for your time
    Bennie

  11. Bennie said on November 18th, 2006 at 10:27 am:

    Ok Never mind we don’t need peo­ple to skip to the next months on the agenda. So for­get the last question.

    But I do have a new ques­tion. Why are all the times for the month cal­en­dar 2 hours behind what it should be.

    If you click the cal­en­dar link below it will go to the cal­en­dar but it dis­plays the google stuff up top with the cor­rect times but if you click next month all the times shift down by 2hrs. Do you have any ideas why.

    Here is my source
    http://rlchome.org/googlecal/MyGoogleCal.txt

    here is the cal­en­dar.
    http://rlchome.org/googlecal/MyGoogleCal.php

    Thank you so much for your time
    Bennie

  12. Brian said on November 18th, 2006 at 10:57 pm:

    Hey Ben­nie,

    You’re wel­come. This script is just my way of giv­ing back to the Internet.

    As for your ques­tions, work­ing backwards…

    1. The two hour dif­fer­ence and times being dis­played using mil­i­tary time for­mat is because you are com­bin­ing mul­ti­ple cal­en­dars. Each cal­en­dar has a for­mat and time­zone set­ting, and appar­ently they don’t all share the same set­tings. The cal­en­dar that’s listed first is the one which sets the time­zone and time for­mat for the rest of the calendars.

    2. The rea­son you can’t set the agenda mode is because you have the mode set to month in the $query vari­able at the very end. (You also have the chrome set, too.) When you tell Google Cal­en­dar to dis­play both month and agenda, it must get con­fused and defaults to month, or it sim­ply takes the first or the last value it reads. In any case, you really should not set the $query vari­able. You should leave that as an empty string because it’s meant to ini­tial­ize the variable.

    3. I know you want to com­bine mul­ti­ple cal­en­dars, but it won’t work with the script as writ­ten. I didn’t account for this because when I orig­i­nally wrote the script I wasn’t aware you could com­bine cal­en­dars by sim­ply declar­ing mul­ti­ple src’s. The prob­lem is two-fold. 1) mul­ti­ple query vari­ables with the same name is bad. Query vari­ables should be declared once and have comma-delimited val­ues. This wouldn’t be Google’s first kludge. 2) Now when PHP reads in the query string to pop­u­late the $_GET vari­able, each src vari­able it sees is treated as a new one and there­fore the last one read will over­write the pre­vi­ous one. This is why only the last cal­en­dar listed was dis­played when you first attempted this.

    So to fix it, I rewrote the $query block to use the orig­i­nal query string sup­plied rather than rebuild­ing it. Makes the code block simpler.

    $query = “”;
    if(count($_GET) > 0) {
    $query = $_SERVER[’QUERY_STRING’];
    $url = “http://www.google.com/calendar/embed?” . $query;
    }

    Sorry it took so long to get back to you, but it’s been a busy week. Any­way, this should fix all your problems.

  13. Bennie said on November 19th, 2006 at 2:01 pm:

    Hi Brian,

    The 2 hour dif­fer­ence thing fixed it. But every­once in a while the mil­i­tary time pops up, but a refresh and it goes back.

    Sorry to be a pain. But I tried the new code and it gives me an error when I use the next month but­tons. Here is my source am I using it the right way.

    http://rlchome.org/googlecal/MyGoogleCal2.txt

    Also here is my page.
    http://rlchome.org/googlecal/MyGoogleCal2.php

    Thanks so much
    Bennie

  14. Bennie said on November 19th, 2006 at 9:23 pm:

    Nev­er­mind it was some of the sym­bols got messed up when i copied and pasted from your page. But when I replaced those with the cor­rect ones it works fine.

    Thanks A Bil­lion for your help. This is what we where look­ing for to the T.

    If you ever fig­ure out why mil­i­tary time pops up every­once in a while. Let me know. We are using the same time­zone for all the cal­en­dars and they are all set to non mil­i­tary time. So I don’t know if it is a ren­der­ing thing on googles side or what.

    Thanks Again.
    Bennie

  15. Dusty said on November 20th, 2006 at 12:38 pm:

    I found your very cool post on restyling the embed­ded google cal­en­dar and wanted to use it on my web­site. I’m try­ing to use it in MINI mode but have been unable to get it where I can style it. I don’t know much about PHP, but I’ve tried to fol­low your instruc­tions. I’ve got­ten past the point where I’ve down­loaded the css for the google cal­en­dar, but I’m get­ting strange out­put once I put it all together. I just see the php code in the area that I defined for the cal­en­dar. Here’s my iframe line…

    I’ve also changed the $url in MyGoogleCal.php to

    $url = “http://www.google.com/calendar/embed?src=1jh438msggnp228leesdevunis%40group.calendar.google.com&chrome=NAVIGATION&
    mode=MINI&height=400″;

    These are the only things I’ve changed besides point­ing the $stylesheet in MyGoogle­Cal to mygooglecal.css locally. Any idea why I’m get­ting this result?

    http://static.flickr.com/121/302122800_925d2523e9_o.jpg

  16. Brian said on November 20th, 2006 at 11:06 pm:

    If I had to guess, you’re get­ting that result because the script is being treated as text and ren­dered as tag soup rather than being processed as a PHP script. Make sure your PHP con­fig­u­ra­tion is cor­rectly setup on your server.

    As for mini-mode, I do not offi­cially sup­port it as it’s still (as far as I know) an exper­i­men­tal fea­ture, albeit a work­ing one. From what I gather from the Google Cal­en­dar Help Group, the mini mode has some prob­lems like only dis­plays data that is shared to every­one, only dis­plays in Eng­lish, the selected date (and there­fore the agenda) does not update when nav­i­gat­ing month-to-month, etc.

    That said, it doesn’t mean that mini mode can’t be styled. On the con­trary it can. Mini mode uses a style block in the header rather than a linked stylesheet but the tech­nique used in the script will work just the same. You sim­ply have to cre­ate mul­ti­ple $pattern-$replacement-$buffer blocks to edit the indi­vid­ual styles you want to change. Since you’ve admit­ted to not being a PHP expert I sug­gest enlist­ing a friend to help you out with this task. I should warn you, though, that peo­ple who’ve tried to use this script with mini mode have reported the agenda por­tion breaks.

  17. Rex said on December 1st, 2006 at 11:03 pm:

    Would you be able to post a cURL alter­na­tive to this script? My host (Dreamhost) has dis­abled “fopen” on all of the sites they host, so I get “file access is dis­abled in the server con­fig­u­ra­tion” errors that appear to repeat infi­nitely. I’m in the process of mov­ing my band’s online show cal­en­dar from onlinegigs.com (a pay site) to Google Cal­en­dars (free).

    This is great that you’ve posted this infor­ma­tion — I can’t wait to use it!

    If you wanna see the hor­ri­ble thing that hap­pens when fopen is dis­abled:
    http://phobophobe.com/calendar.html

    Thanks!

    - rex

  18. Michael said on January 3rd, 2007 at 12:56 pm:

    Like other posts here, I would like to say what a great idea this is. The prob­lem I wold like to solve is being able to merge sev­eral google cal­en­dars into one dis­play cal­en­dar embed­ded in my site. When you do that by adding src’s, all the cal­en­dar items dis­play in the same color. Is it pos­si­ble using the PHP script, to make each cal­en­dar dis­play in a unique color?

    On a seper­ate note: has any one tried using mini-mode to dis­play a full year at a time? 12 seper­ate instances I mean …

    Many thanks -
    Michael

  19. Brian said on January 3rd, 2007 at 7:31 pm:

    Rex,

    I’ll have a look at cURL, but I won’t set a release date. ;)

    ———————–

    Michael,

    I’m actu­ally sur­prised Google over­looked color-coding com­bined cal­en­dars, espe­cially since it’s one of the most requested fea­tures. I did some research over the hol­i­days, and I got the impres­sion this is tech­ni­cally fea­si­ble. The key is pars­ing the eid strings. Events from the same cal­en­dar share com­mon char­ac­ters in their eid strings. Usu­ally it’s the last 30 char­ac­ters but not always. It’s that incon­sis­tency that may make it dif­fi­cult to color-code events using the script, though prob­a­bly not impossible.

    Brian

  20. Brian said on January 3rd, 2007 at 8:38 pm:

    OK Rex, based on this tuto­r­ial http://www.higherpass.com/php/tutorials/Using-Curl-To-Query-Remote-Servers/, try this.

    Replace the 5 lines for “Request the cal­en­dar” with

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $buffer = curl_exec($ch);
    curl_close($ch);

    Fixed bug in line 5. Was orig­i­nally $buffer = curl_exec();. Credit goes to Yvette in com­ment #52.
    I haven’t tested the above code, but it should work. I’m not all too famil­iar with cURL but based on the API docs and the tuto­r­ial that’s what you need. In a future ver­sion of the script, I’ll give the user the option to pick which method they want to use.

  21. Michael said on January 4th, 2007 at 1:17 pm:

    Thanks Brian — I see on the google groups that this issue is get­ting a lot of play; fin­gers crossed google will update cal­en­dar to make this the default behav­ior … until then will post here if I come up with a reli­able regex for the eid parsing …

    best wishes for your new year -
    Michael

  22. Michael said on January 4th, 2007 at 1:27 pm:

    By the way,

    I came across this:

    http://30boxes.com/boxed

    Another way to mod­ify Google cal­en­dar feed(s) …

  23. Stefanie said on January 8th, 2007 at 11:47 pm:

    This is great…much appre­ci­ated. I’ve man­aged to change the col­ors to match my web­site scheme, but I can’t fig­ure out how to get rid of the Google logo and cal­en­dar title. I know this is an option straight from Google’s con­fig­u­ra­tion tool, but it didn’t carry over and I can’t fig­ure out which code in the CSS will get rid of them.

    Mahalo!
    Stefanie ;)

  24. Brian said on January 9th, 2007 at 12:13 am:

    He mea iki, Stefanie.

    To get rid of the title and large logo, you want to make sure that “&chrome=NAVIGATION” is part of your query string.

    At a very min­i­mum, your iframe code should look like

    <iframe src=“MyGoogleCal.php?src=user%40domain.tld&chrome=NAVIGATION”></iframe>

    If you want to go even fur­ther and remove the small logo that will appear in the bottom-right cor­ner, add “display:none” to the style for “poweredby-link” like so:

    #footer #poweredby-link{display:none;…}

    where the elip­sis is the orig­i­nal code (which can be removed if you want, but its just as easy to leave it in in case you want to dis­play the logo at a later time).

    That should do it.

  25. Stefanie said on January 11th, 2007 at 11:13 pm:

    Works great! Mahalo again. ;)

  26. Sue said on January 12th, 2007 at 10:15 am:

    Help­ing a friend with her web­site and this worked per­fectly. Thanks for post­ing it!

    Now if any­one knows how to get the event details links from an embed­ded cal­en­dar to open in a pop-up rather than new win­dow, I’m all ears…

  27. Brian said on January 12th, 2007 at 12:20 pm:

    There are many ways to do this. One such way would be to use the script to parse the HTML and over­ride the ‘target=“_blank“‘ con­tained in the ‘class=“event-link“‘ anchor tags.

    $pat­tern = ‘/<a class=“event-link”.*(target=“_blank”).*>/’;
    $replace­ment = ‘onclick=“window.open(this.href);return false;” target=“_blank“‘;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    I left the ‘target=“_blank“‘ in the replace­ment in case the user turns off Javascript, so it’ll revert to the orig­i­nal behav­ior. You can change how the popup opens by adjust­ing the para­me­ters for window.open (i.e., you can remove tool­bars, con­trol the size, make it modal, etc.)

    The code is untested.

  28. bullet proof hosting said on January 26th, 2007 at 2:14 pm:

    nice

  29. The Design Coalition :: Blog Archive » Restyle Google Calendar said on February 8th, 2007 at 11:10 am:

    […] Link: LindenLan.net […]

  30. Ian said on February 22nd, 2007 at 1:01 pm:

    I’d love to con­vert my Dot­Net­Nuke cal­en­dar over to Google cal­en­dars. Unfor­tu­nately, Dot­Net­Nuke is not a PHP appli­ca­tion. Has any­one con­verted this abil­ity over to JavaScript or .Net code?

  31. Brian said on February 22nd, 2007 at 1:53 pm:

    There’s obvi­ously some inter­est in the DNN forums regard­ing Google Cal­en­dar inte­gra­tion either directly or via iCal syn­di­ca­tion. Unfor­tu­nately it’s not cur­rently sup­ported as far as I can tell.

    http://www.dotnetnuke.com/Default.aspx?tabid=795&scope=threadsearch

    If, how­ever, you wanted to embed a Google Cal­en­dar, you would most likely just need to edit a tem­plate file if DNN is sim­i­lar to other CMSes. Google Cal­en­dar isn’t depen­dent on PHP.

    How­ever, if you wanted to use my code to restyle an embed­ded Google Cal­en­dar on your page then you’d need to sup­port PHP on your web server. Your site doesn’t nec­es­sar­ily have to run on PHP to use the code above. It just has to be able to serve a PHP page in addi­tion to what­ever other script­ing lan­guage your site runs on whether it be ASP, ASP.NET, Cold­Fu­sion, PHP, or other.

  32. Chris said on March 8th, 2007 at 10:40 am:

    Hi Brian,
    Great work here. Have you found out how to expand the Agenda view to show more than just one month’s worth of cal­en­dar entries? I’m inter­ested in show­ing 3 months in the Agenda view, since the cal­en­dar in ques­tion will only have a cou­ple of entries/month. Thanks so much for this. I’m inte­grat­ing your script this afternoon.

  33. Luigi said on March 17th, 2007 at 10:47 am:

    I am a com­plete moron or some­thing. I can’t get this thing fig­ured out at all. Can some­one hold my hand so I can take baby steps please?

    Luigi

  34. Brian said on March 17th, 2007 at 8:49 pm:

    Unfor­tu­nately Chris, from what exper­i­ments I’ve done, it looks like Google puts a server-side cap of 30 days for the date range. You can always make the date range shorter than 30 days, but not more. What would be a really cool fea­ture would be to input the num­ber of upcom­ing events you’d like to dis­play from a spec­i­fied date. The best work around I can sug­gest (though it could get ugly) would be to embed mul­ti­ple cal­en­dars with­out the UI where each agenda dis­plays a dif­fer­ent but sequen­tial 30-day date range.

  35. Benjamin Allfree said on March 20th, 2007 at 10:08 am:

    Any­one inter­ested in run­ning PHP inside DNN should check out http://www.nukelet.com

  36. John said on April 2nd, 2007 at 4:52 am:

    I would like to pur­chase the time of some­one to cus­tomize an exist­ing embed­ded cal­en­dar for us using this method. Please call 866−676−7284 x803

  37. Lynne said on April 2nd, 2007 at 1:42 pm:

    I am at a loss…
    I keep get­ting this error when try­ing to load the php

    CGI Error
    The spec­i­fied CGI appli­ca­tion mis­be­haved by not return­ing a com­plete set of HTTP headers.

    Any help apreciated

  38. Brian said on April 3rd, 2007 at 12:22 am:

    Lynne

    I’m guess­ing that this is an IIS error, and it is prob­a­bly due to an incor­rect or badly con­fig­ured instal­la­tion of PHP. I would rec­om­mend that you cre­ate a PHP page that contains:

    <?php
    phpinfo();
    ?>

    Then load that page to see what you get. Dis­play­ing the phpinfo is typ­i­cally a good first step in deter­min­ing if the instal­la­tion worked and con­firm­ing the configuration.

    The PHP man­ual is a good ref­er­ence as well: http://us2.php.net/manual/en/install.php

    Googling for that par­tic­u­lar error mes­sage results in a wide spec­trum of alleged causes and pos­si­ble solutions—too many to list here.

  39. Stephane said on May 2nd, 2007 at 10:39 am:

    I added this line to make sure that accen­tu­ated car­ac­ters (eg: é è) appear correctly:

    $buffer = str_replace(”,”,$buffer);

    Works great. Thanks for sharing.

  40. Stephane said on May 2nd, 2007 at 10:44 am:

    My line didnt go through in the pre­vi­ous post. What it was sup­posed to be:

    replace the head tag with the head tag plus a meta tag that spec­i­fies that the con­tent is UTF-8.

  41. George said on May 8th, 2007 at 8:59 am:

    Hi Brian,
    I can’t fig­ured out why the cal­en­dar would not load cor­rectly on my calendar.html! I was able to embed the orig­i­nal Google iframe.
    I get an error: Warn­ing: fopen(http://www.google.com/calendar/embed?src=neojazzique%40gmail.tld): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/georgedi/public_html/MyGoogleCal.php on line 56

    Warn­ing: feof(): sup­plied argu­ment is not a valid stream resource in /home/georgedi/public_html/MyGoogleCal.php on line 57

    Do I need to place my MyGoogleCal.php in php folder or some­thing else is wrong?

    Greatly appre­ci­ate your help!

    George

  42. Brian said on May 8th, 2007 at 9:15 am:

    George,

    Try chang­ing .tld to .com in the cal­en­dar URL.

  43. George said on May 8th, 2007 at 9:31 am:

    Brian — it worked! Thank you!

    Why is it so small, though? Are the size para­me­ters in the css sheet or your code shrinks it? I put it in a div but it didn’t change its size.

    Thanks again!

    George

  44. George said on May 8th, 2007 at 11:39 am:

    Now the next and prev month nav but­tons won’t work. Nei­ther Today but­ton works. I don’t get it.
    In the stylesheet which one is the prop­erty for the back­ground color. Right now is white. I can­not find it.

    Thanks

  45. Ronald said on May 8th, 2007 at 1:42 pm:

    Is there any way users can add their own events to these cal­en­dars. I’ve suc­ces­fully incor­po­rated the code into a site. But I would like for users to add an event or enter an appoint­ment time themselves.

    Can they do this from the site, or will they have to use their own Google account and have per­mis­sions to update that cal­en­dar through Google and not the web­site this cal­en­dar appears on.

  46. George said on May 9th, 2007 at 6:49 am:

    Hi Brian,

    I man­aged to edit the stylesheet how­ever I lost the nav­i­ga­tion — I am not able to go to the next month. The agenda doesn’t work either. I changed only color prop­er­ties — any ideas?

    Thanks!

    George

  47. Brian said on May 9th, 2007 at 9:13 am:

    George,

    As stated in the com­ments, there are (4) rel­a­tive image URLs that must be changed to absolute URLs in the com­piled Google stylesheet. You need to change them so they appear sim­i­lar to:

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

    Ronald,

    The script doesn’t change how Google Cal­en­dar func­tions. It just allows you to change how it looks. All changes to the data must be done via Google Calendar’s nor­mal interface.

  48. George said on May 9th, 2007 at 3:16 pm:

    Brian,

    Thanks again! I man­aged to edit the CSS. I’ll keep Googles nav but­tons for now. I couldn’t tell you why the nav­i­ga­tion was messed up as I started over and fol­lowed the same steps.

    George

  49. George said on May 9th, 2007 at 5:14 pm:

    Hi Brian,

    how would you go about set­ting up the Cal­en­dar in a popup win­dow? Sorry for the end­less questions.

    Thanks,

    George

  50. Brian said on May 9th, 2007 at 10:04 pm:

    George,

    Glad you got it work­ing. Off the top of my head I would cre­ate a con­tainer web page for the cal­en­dar. Embed the cal­en­dar in that page. Then cre­ate a link to open that page in a popup window.

    Of course if you want to be all Web 2.0, you can put the cal­en­dar in a div with the display:none set and then use the link to expose the div. Or if you want to get real fancy check out:

    http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox

    or

    http://particletree.com/examples/lightbox/

  51. George said on May 11th, 2007 at 5:51 am:

    Thanks Brian,

    I got it work­ing with a basic onclick= “window.open(… etc. For some rea­son the Cal­en­dar doesn’t load as fast as you would expect. I assume it has to do with the CSS’ size since there are no graph­ics. That’s why my ques­tion in a first place regard­ing the popup.

    Per­haps this could be help­ful for some­one else that wants to use the cal­en­dar in a pop-up.

    Thanks for the sug­ges­tions and the links. I’ll post back.

    George

  52. Yvette said on May 12th, 2007 at 9:59 pm:

    I also had fopen dis­abled by my host, so I tried the curl ver­sion. I had to make one small change to get this to work on my site (hosted at GoDaddy).

    I made a change in line 5 below.

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $buffer = curl_exec($ch); //HAD TO ADD THE $ch here to work on GoDaddy
    curl_close($ch);

  53. Yvette said on May 12th, 2007 at 10:19 pm:

    I also had to change CURLOPT_HEADER to 0 so it wouldn’t show the header. Work­ing per­fectly now!

  54. bl00k said on June 1st, 2007 at 9:53 am:

    Hello,

    I am not much of a coder, but I would love to put a google cal­en­dar in my gam­ing squads web page but don’t want it to clash, which is why I am here. I googled a solu­tion and found this page. I haven’t really done CSS before. Could some­one help me with a more step-by-step process to imple­ment­ing this? If that is ask­ing too much, could some­one at least point me to a place to learn what I need to get this cal­en­dar look­ing presentable?

    My cur­rent cal­en­dar is here: http://www.fighting69.com/schedule.html

    My Google Cal­en­der is here: http://www.fighting69.com/scheduletest.html

    I would like the color scheme to fit in with the site.

  55. ZakMacDonald said on June 9th, 2007 at 3:19 pm:

    First off, this is a very nice and use­ful tool for Google Cal­en­dars. I’ve mod­i­fied to CSS a bit to fit the look of a cur­rent design job, but no mat­ter what, set­ting heights, mod­i­fy­ing your code:

    $pat­tern = ‘/(rowspan=“5”)/’;
    $replace­ment = ”;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    Still no luck on get­ting the cal­en­dar to have the height of “one event per day”. If you have any advice It’d be much appreciated.

  56. ZakMacDonald said on June 9th, 2007 at 8:08 pm:

    bl00k,

    Best thing I found is print screen your cal­en­dar in Pho­to­shop, then use the eye­drop­per and copy the HEX code for what­ever color it was and do a FIND > REPLACE in Dreamweaver or what­ever pro­gram for that color with your new color. That’s the sim­plest way I found to edit the CSS, oth­er­wise I’d kill myself find­ing what every sin­gle value means.

  57. Brian said on June 9th, 2007 at 9:24 pm:

    Zak,

    If you load the embed­ded cal­en­dar in Fire­fox (i.e., type http://www.google.com/calendar/embed?src=user%40domain.tld in the address field), you can use the DOM Inspec­tor exten­sion to dis­sect the cal­en­dar. What you’ll dis­cover is that sim­ply remov­ing the rows­pans won’t accom­plish your goal because the actual rows that the table cells are span­ning still exist. With the DOM Inspec­tor you’ll notice a pat­tern of a table row (for the days) fol­lowed by five table rows of class “grid-row” (for the events). In addi­tion to remov­ing the rows­pans, you must also add a replace­ment pat­tern to remove the 2nd thru 5th grid-rows while keep­ing the first. Of course this means no event can over­lap another event because there will be no row avail­able to dis­play it; more specif­i­cally, any events in a cell will be removed if it doesn’t occupy the first grid-row. The actual regex pat­tern isn’t sim­ple, but cer­tainly not impos­si­ble to write. If you make the regex only remove grid-rows that do not have at least one event, then you avoid the over­lap­ping event prob­lem, but of course it makes the regex pat­tern that much more com­pli­cated. Good luck.

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

    […] how-to for restyling Google Cal­en­dar is by far this site’s most pop­u­lar post so far. Right from the start, peo­ple had requested […]

  59. Joseph said on July 1st, 2007 at 9:20 am:

    Is there a way to make the event links open up in the same iframe as the cal­en­dar — or at least not open out­side of the web­site the cal­en­dar is embed­ded in? Thanks!

  60. Brian said on July 1st, 2007 at 2:04 pm:

    See com­ment #27. You can go with the window.open method to open a popup win­dow or try chang­ing $replace­ment to an empty string or ‘target=“_parent“‘.

  61. Joseph said on July 1st, 2007 at 4:19 pm:

    Thanks for the quick response — I tried to use the method in com­ment #27 but what ends up hap­pen­ing is that the actual text gets replaced with the window.open com­mand. So essen­tially the listed cal­en­dar event text is replaced, not the action when clicked… Any ideas? Thanks again!

  62. Chris said on August 3rd, 2007 at 1:24 pm:

    I’m hav­ing the same error as Lynne (Com­ment #37). What am I look­ing for when I cre­ate a test page for PHP instal­la­tion? This test page dis­plays a lot of infor­ma­tion and I’m a lowly musi­cian try­ing to orga­nize dif­fer­ent band sched­ules for a club. Thanks for any help!

  63. Marcus said on August 8th, 2007 at 1:53 pm:

    Can any­one help me change the back­ground of the cal­en­dar to an Image or to trans­par­ent so that it will match up with my site? What do i need to do?

  64. Brian said on August 8th, 2007 at 3:53 pm:

    Mar­cus,

    Load MyGoogleCal.php by itself. Don’t for­get to spec­ify the src either in the PHP file itself or in the query string. If you view the source, you’ll dis­cover that the back­ground color is con­trolled by an inline style in the body tag.

    style=“background-color: rgb(255, 255, 255);”

    If you use Fire­fox and have the Fire­bug plug-in installed you can even change the color dynam­i­cally. It’ll help you visu­al­ize what will change.

    Any­way, to change the back­ground you’ll have to add another pattern-replacement code block.

    $pat­tern = ‘style=“background-color: rgb(255, 255, 255);”’;
    $replace­ment = ‘style=“background-color: rgb(0, 0, 0);“‘;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    The above block will change the color to black. You can set the $replace­ment string to any valid inline style. If you want the back­ground to be trans­par­ent, then set $replace­ment to an empty string, i.e. ”.

    **********************

    Chris,

    Well it sounds like the phpinfo() com­mand worked. I would check the php ver­sion to make sure you have the lat­est and great­est then. As I explained in Com­ment #38, the cause of that error can be one of many things. If you have direct access to the server, I’d rec­om­mend try­ing to find a friend who’s knowl­edge­able and can help you con­fig­ure your server.

  65. Marcus said on August 9th, 2007 at 6:30 am:

    Thank you so much Brian! I’ll give that a shot some­time tonight.

  66. Kent Gottschalk Hansen said on August 24th, 2007 at 3:21 am:

    Thanks for the SuperB script. I’m hav­ing trou­ble with the char­ac­ter­set, hope some­one can help.

    If I insert a google cal­en­dar the nor­mal way, spe­cial dan­ish let­ters are dis­played cor­rectly — how­ever if I use this php script the char­ac­ters are not dis­played correctly.

  67. Brian said on August 24th, 2007 at 8:23 am:

    Kent,

    I think some­one else (com­ment #39 and #40) went through a sim­i­lar prob­lem and their solu­tion was to add another pattern-replacement code block. Based on the descrip­tion, I believe it looked some­thing like this:

    $pat­tern = ‘/(<head>)/’;
    $replace­ment = “<head>\n<meta http-equiv=\“Content-Type\” content=\“text/html; charset=UTF-8\”>”;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    The code is untested but should work. Just add this to the end of the PHP file and you should be good to go.

  68. Sylvain said on August 29th, 2007 at 8:58 am:

    Thank you for your blog. I used it to add color and tool tip. Have a look to September-> http://tinyurl.com/3ykavd

  69. Sylvain said on August 30th, 2007 at 12:31 pm:

    Now, the date, the place and the descrip­tion are in the tool tip.

  70. Karena said on September 7th, 2007 at 10:46 am:

    Ok this has been work­ing great for months and then sud­denly all i get is the title of the cal­en­dar and an error on Line 21 “Object doesnt sup­port this prop­erty or method.” did google change some­thing? is any­one else’s calendar’s sud­denly stopped work­ing with this script? ideas, anyone?

    Thanks for a great script — hope to keep using it!

  71. Brian said on September 7th, 2007 at 9:09 pm:

    It would appear that Google has indeed changed how the embed­ded cal­en­dar is gen­er­ated. If you try the embed­d­a­ble Google Cal­en­dar con­fig­u­ra­tion util­ity to style the cal­en­dar, you’ll notice some new options—including mul­ti­ple cal­en­dars. The pre­views shows that col­ors assigned to dif­fer­ent cal­en­dars are pre­served. So that looks promis­ing. Still fine tun­ing the fonts and col­ors of the cal­en­dar itself isn’t pos­si­ble so I have some work ahead of me. Unfor­tu­nately I’m cur­rently trav­el­ling and can­not devote my full atten­tion to devis­ing a fix at the moment. I’ll post a com­ment when I man­age to come up with a solu­tion. So stay tuned by sub­scrib­ing to the com­ment feed.

  72. Michael Mc said on September 7th, 2007 at 11:29 pm:

    OK, after some more pok­ing around, I found a work around for the problem…Google’s old style cal­en­dar that can be tweaked is still avail­able by chang­ing the URLs from:

    http://www.google.com/calendar/embed

    TO

    http://www.google.com/calendar/htmlembed

    I don’t know how long this will be avail­able but I am happy for now…

  73. Brian said on September 8th, 2007 at 6:16 am:

    That’s some good sleuthing Michael. Thanks! That will cer­tainly get everyone’s cal­en­dars back to nor­mal and tide things over until I can update the script to use Google’s new format.

  74. Izabael DaJinn said on September 9th, 2007 at 11:39 pm:

    OMG! Thank you so much for being on the ball with a workaround. I love this script. It’s been a life saver to use google cal­en­dar on my site since it would be exceed­ingly ugly oth­er­wise. Their new tool is still a joke com­pared to the power of this lit­tle script!

    *iza

  75. Michael Mc said on September 16th, 2007 at 11:20 am:

    I agree with you Izabel, the pow­der blue just wouldn’t work with my church’s web site which is in green. I am glad that I could con­tribute some­thing to Brian’s efforts in mak­ing the Google cal­en­dar cus­tomiz­able. If you want to see what I did you can visit:

    http://www.standrewmoore.org/

  76. Michael Mc said on September 16th, 2007 at 11:21 am:

    Oops, http://www.standrewmoore.org/calendar.htm

  77. Scott said on September 17th, 2007 at 8:43 pm:

    This is a great script. We are using it on our Boy Scout web­site, but my employer has a proxy that is pro­hibit­ing the IFrame from load­ing a page that con­tains an email address in the URL. This is a prob­lem when you use the PREVIOUS and NEXT and TODAY but­tons. The email address is the gmail.com account in the URL. I was going to code a con­vo­luted work-around that would add an onClick event to these <A> tags that would put the HREF tag in a hid­den form which would get posted to the par­ent page. I’m not sure it would work and it’d be very clumbsy — not to even men­tion a pain when google changes things again. Do you have any thoughts on this o great scripter? Thanks!!!

  78. Scott said on September 17th, 2007 at 8:49 pm:

    [ EDIT OF PREVIOUS POST ]

    My plan was to post the form to the IFrame (not par­ent page) and use the posted vari­ables to get the html (fopen) –> avoid­ing the email address from being in the IFrame source URL was the objec­tive. Thanks!!!

  79. Brian said on September 18th, 2007 at 5:37 am:

    Scott,

    More often than not, it’s bet­ter to solve a prob­lem by con­fig­u­ra­tion than by cod­ing, espe­cially if the con­fig­u­ra­tion is the source of the prob­lem. So, the right way to han­dle this sit­u­a­tion would be to con­vince your employer to add an excep­tion to the proxy fil­ter to allow all traf­fic to/from Google Cal­en­dar. I find it odd that you’re able to load the main cal­en­dar (via the script), but the pre­vi­ous, next, and today but­tons don’t work because they all have an email address in the URL query string. I doubt load­ing the cal­en­dar via a form will make a dif­fer­ence since you still have to make the same HTTP request to the same URL to get the same data.

  80. Scott said on September 19th, 2007 at 10:34 pm:

    Yes, and I had tried going down the con­fig­u­ra­tion route already; unfor­tu­nately that didn’t get very far. I wrapped up the cod­ing tonight and it works like a champ. We’ll see how long it lasts. Thanks again for the work you have/do put into the Google Cal­en­dar customizations.

  81. Jason G. Williscroft said on September 27th, 2007 at 10:40 pm:

    Michael Mc, you sonofa­gun, you fixed the cal­en­dar on my homepage!

  82. Levi said on October 2nd, 2007 at 1:55 pm:

    Hey, first off this is a great thing that you have here. Any­ways, like every­one else I am try­ing to get my google cal­en­dar to look like my GREEN site and have had no luck. I put in the code that you have but I still have trou­ble get­ting it to read my stylesheet. I got it to where the cal­en­dar is there and it comes up. But no styles at all. I don’t know what the deal is. My page that this is on is:
    http://kennethetta.com/index.php?option=com_content&task=view&id=20&Itemid=21
    thanks guys.

  83. Brian said on October 2nd, 2007 at 7:42 pm:

    Levi,

    You down­loaded the wrong stylesheet. See com­ment #5 on how to down­load the stylesheet. The cor­rect stylesheet’s sec­ond line, after the copy­right, should begin with

    body,td,th{font-family:Arial,sans-serif}

    The one you have begins with

    #calendarsBottomChrome{font-family:Verdana;…

    From now on you have to use

    http://www.google.com/calendar/htmlembed

    instead of

    http://www.google.com/calendar/embed

  84. Levi said on October 8th, 2007 at 6:36 am:

    Hey thanks so much Brian! I am on the right track now. Could you let me know how to change the back­ground color though? I read the post above, but when I inserted:
    $pat­tern = ‘style=”background-color: rgb(255, 255, 255);”’;
    $replace­ment = ‘style=”background-color: rgb(0, 0, 0);”‘;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    … into the code, it comes back with an error say­ing it needs to be back­slashed or some­thing? But I made it look like the other $replace­ments and it just doesn’t do any­thing but give me white. Is there some­thing else that I need to be doing? Thanks!

  85. Levi said on October 8th, 2007 at 6:54 am:

    Oh hey guys! Nvm! I just put it in the URL on the iframe and it worked. THanks for all your help, I will let y’all know if I get this cal­en­dar com­pletely redone. Thanks SO SO MUCH! I had no idea you could do this!

  86. Levi said on October 8th, 2007 at 9:09 am:

    I fin­ished (for the most part) skin­ning it. So, here is just another exam­ple of this won­der­ful blog put to use: http://kennethetta.com/index.php?option=com_content&task=view&id=20&Itemid=21

  87. Levi said on October 10th, 2007 at 8:49 am:

    Update: just wanted to let ya’ll know this helped me cre­ate 2 dif­fer­ent great cal­en­dars! Thanks guys!

    the new one — http://wildweek.com/calendar.html

    and the old one is posted above.

    THANKS!

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

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

  89. Eric Bidwell said on October 16th, 2007 at 11:03 pm:

    Any idea on the pos­si­bil­ity of get­ting a print fea­ture using “@media print” in the stylesheet?

  90. Brian said on October 17th, 2007 at 9:19 am:

    Eric,

    Please elab­o­rate. The stylesheet for the HTML embed­d­a­ble cal­en­dar already has an “@media print” style. It may be more use­ful if you explain what you are try­ing to accom­plish because both the HTML and Javascript ver­sions of the cal­en­dar are print­able as-is.

  91. Eric Bidwell said on October 18th, 2007 at 1:17 pm:

    I don’t have a printer but I did a print to PDF and it lost some of the styling. I should have men­tioned it before, I was think­ing that the “@media print” func­tion might open up the print fea­tures that are avail­able from the google cal­en­dar account with the options for type of view and data included. I’m guess­ing that’s not the case since you didn’t men­tion that :( Since I posted that I have redone the cal­en­dar in the new way you described a few days ago. The “@media print” is not in the new CSS file. I already put in a request at google to add the print fea­ture to the embed­ded cal­en­dars and they responded say­ing they’ll look into it, so maybe they will add that soon and it will just show up on our cal­en­dars one day. Thanks for the amaz­ingly help­ful tuto­r­ial. Though if you end up doing another, since you’ve had to redo it before, maybe you could really pin down a step by step. I man­aged my way through it but not with­out quite a bit of dif­fi­culty. More specif­i­cally it took me a while to fig­ure out where to put the files on my server (yes I know it’s arbi­trary) and how to change the rel­a­tive URLs to point at them. I also had some issues adjust­ing the CSS, though maybe ask­ing for a key would be too much. Maybe I’m a bit less knowl­edge­able than your tar­get, I know just enough HTML, CSS, and PHP to stum­ble around guess­ing and check­ing but I made it none the less. Now to go and theme the CSS again since I updated… I’ll try to remem­ber to come and leave a link to my cal­en­dar once I get it fin­ished. Thanks again, this really is a great help.

  92. Michael Mc said on October 24th, 2007 at 1:36 pm:

    First off, to Jason: I am glad you found my work around helpful.

    Sec­ond off, it appears that Google’s use of JavaScript to gen­er­ate the new ver­sion of the cal­en­dar is WAY too tough for me to crack. I really hope Brian can fig­ure it out.

  93. Brian said on October 24th, 2007 at 2:49 pm:

    Actu­ally, I did Michael. Check out the link at the top of the page to see the lat­est version. ;-)

    May I rec­om­mend sub­scrib­ing to the RSS feed: http://www.lindenlan.net/feed/.

  94. Michael Mc said on November 1st, 2007 at 6:43 am:

    Brian,

    I apol­o­gize, I never looked at the TOP of the page! I will work on the new ver­sion this weekend.

    I also will sub­scribe to the feed so that I don’t miss any more good stuff.

    Thank you so much,
    Michael McCall
    http://www.castlemccall.com/

  95. Landry said on December 2nd, 2007 at 1:13 am:

    Hello

    Thanks for this great resource. I am using the above code (see#84) to set the back­ground to trans­par­ent. It does not work. I get the fol­low­ing mes­sages appear at the top of the page.

    - “Delim­iter must not be alphanu­meric or back­slash“
    – “HTTP/1.1 200 OK Set-Cookie: S=calendar=rjcv9TnaoF4 Set-Cookie: secid=cdc9fa15ce0ca1eb3919b93545fc6ba6 Cache-Control: no-cache, no-store, max-age=0, must-revalidate Pragma: no-cache Expires: Fri, 01 Jan 1990 00:00:00 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 8850 Date: Sun, 02 Dec 2007 08:05:20 GMT Server: GFE/1.3″

    Any ideas what I could be doing wrong?

    Thanks
    Landry

  96. Landry said on December 2nd, 2007 at 2:02 am:

    Beg your par­don .. I wasn’t using the lat­est version

  97. Ralph said on December 13th, 2007 at 5:02 pm:

    Hi there,

    For an unknown rea­son I can’t get the script to take the newly pro­vided CSS.

    Here’s a link to my cal­en­dar and you can see the script by look­ing at the source code. Any help would be really appreciated.

    http://www.winefinders-usa.com/script.txt

    Thanks,
    Ralph

  98. Brian said on December 15th, 2007 at 2:43 pm:

    If you obtained the CSS via the “google.com/calendar/embed” URL it will prob­a­bly not work. This ver­sion uses the CSS from the “google.com/calendar/htmlembed” URL.

  99. david said on March 1st, 2008 at 10:15 pm:

    I have and embe­ded iframe that works fine but it is read only. How do you cre­ate events?

  100. Brian said on March 2nd, 2008 at 11:34 pm:

    David,

    Unless you have a spe­cific rea­son for using this ver­sion of the script, you should really upgrade to the newer ver­sion. It has more fea­tures and uses the more secure curl func­tion instead of fopen by default. I’ve unof­fi­cially dis­con­tin­ued sup­port for this version.

  101. Scott said on March 5th, 2008 at 11:56 am:

    Aloha, I have been try­ing to apply your Google cal­en­dar restyle and have been pulling my hair out try­ing to fig­ure how all this works. I’m a visual design guy and not very good at cod­ing. I could use the cal­en­dar as is but it really clashes with my clients’ RED color palette. I am will­ing to hire you or donate to your site. I just need it to work. Any help will be appre­ci­ated. My stag­ing site is at http://www.ipolynesia.com/kahuku/calendar-main.htm
    Mahalo.

  102. Mike said on June 29th, 2008 at 8:02 am:

    Hi– I use Google Cal­en­dar on my page, but like the post before me, I know NOTHING about how to modify/customize it. The changes I want are pretty sim­ple (smaller font, etc.). Is there any resource (here or else­where) where I might be able to hire some­one to make these changes for me? Thank you in advance for any advice! ~mike

  103. Geoff said on July 30th, 2008 at 1:37 pm:

    I did as you told me and I can tell this is going to work per­fectly, but right now none of the query that i put it does any­thing and it keeps com­ing up with the default cal­en­dar. What am I doing wrong? Thanks.

  104. steve said on August 30th, 2008 at 2:46 am:

    I have the cal­en­dar show­ing up, but I can’t get it to use my own css style sheet. This is what I’ve changed in the code: $stylesheet = ‘calendar.css’;(the name of my stylesheet in the same folder as my calendar.php). $url =”(should I put the embed url here?)”, $replace­ment = ‘calendar.php’; (the name of my cal­en­dar page), finally <iframe src=“calendar.php?src=orthodox.london%40googlemail.com”. Have any idea what I’m doing wrong?

  105. Erica said on September 27th, 2008 at 12:51 am:

    My google cal­en­dar is work­ing fine now, JUST ONE QUESTION. I can not seem to remove the “printer” icon that sits next to the tabs. When the script: “showPrint=0&” is added to the query string, noth­ing hap­pens. It does how­ever work with my orig­i­nal cal­en­dar script. But when using these files, it doesn’t work. Why won’t it delete?

    Actu­ally, I’d keep the printer icon “if it was work­ing.” That’s why I want to get rid of it for the most part. When you click on it in Firefox3.0 you get this message…

    The requested URL /images/mygooglecal/print_preview was not found on this server.

    Addi­tion­ally, a 404 Not Found error was encoun­tered while try­ing to use an Error­Doc­u­ment to han­dle the request.”

    So I have 2 choices… either get it to work OR just get rid of it. Can any­one help? PLEASE!! Is the path above wrong? What is it look­ing for?

  106. Erica said on September 27th, 2008 at 1:54 pm:

    Please see the attached url. I don’t know why in IE6.0 the “month/year” is located where it is. See the same url in Fire­fox and it’s in line with the tabs where it should be. How can I adjust the style-sheet that was down­loaded from the zip folder “mygooglecal3ie.css” so this “month/year” text is moved down and over so we don’t have this gap above the cal­en­dar anymore.

    Hope you can’t help. Last thing look­ing to fix.

  107. Erica said on September 27th, 2008 at 1:56 pm:

    Oops, thought the url was printed above. Here it is. Please see my com­ments above and refer to this url prob­lem in IE6.0 with the “month/year.”

    http://fatfish.info/images/mygooglecal/newcal.html

    Thanks!

  108. digifix said on December 14th, 2008 at 12:21 pm:

    Im using a Joomla mod­ule to dis­play googlecal.…I want to use your tech­nique above but I dont know where to begin to find the css, src files etc in the back­end of Joomla. any one else as clue­less as i am?

    Thank you in advance.…I would be more than will­ing to pay for a solution.

  109. Jason Smith said on December 19th, 2008 at 1:49 pm:

    I am hav­ing trou­ble load­ing the new style sheet. I can pass the cal­en­dar through the php script as indi­cated in the instruc­tions. At that point the cal­en­dar loses all of its styling as indi­cated in the instruc­tions. I have suc­cess­fully down­loaded the style sheet and ref­er­enced it in the php script. here in lies the prob­lem. The stylesheet i have saved as “mygooglecal.css” is not styling the embed­ded cal? im not exactly sure where i went wrong? i know the path is correct.

    here is the page:

    http://www.jrs-webdesign.com/projects/trinity/calendar.php

    let me know if any­one can help! Thanks for the great script!

  110. Brian said on December 19th, 2008 at 4:12 pm:

    Please use ver­sion 4 of the script. This ver­sion is no longer supported.

    http://lindenlan.net/2008/12/04/restyle-google-calendar-4/

Subscribe to this post/thread