As a few users of MyGoogleCal3 have already pointed out, the script no longer works prop­erly. That’s the bad news. The good news is ver­sion 4 does work. In fact, with the lat­est changes Google made to their code, ALL the fea­tures that were bro­ken in 3 appear to be work­ing now—Agenda/Week view, the cal­en­dar nav­i­ga­tion but­tons, and IE is fixed. Please down­load and test out the lat­est ver­sion, and report any bugs in the com­ments and I’ll try to resolve them as time allows.


UPDATE (2009 July 5): MyGoogle­Cal is now RESTYLEgc.

UPDATE (2009 June 23): Google’s recent update broke the jQuery injec­tion. In fact, the update is incom­pat­i­ble with inject­ing jQuery, Pro­to­type, and MooTools. The only JavaScript frame­work that works is Dojo. I updated the code to inject that frame­work instead. For those peo­ple who value sta­bil­ity over hav­ing the lat­est and great­est fea­tures, I also added a com­ment to MyGoogleCal4js.php that explains how to freeze the cal­en­dar ver­sion. That should hope­fully help all you fel­low devel­op­ers who tire of your clients call­ing you when their cal­en­dar breaks.

UPDATE (2009 May 3): MyGoogleCal4 now sup­ports jQuery manip­u­la­tion of the DOM. This gives the abil­ity to apply styles after page load. As an exam­ple, the default code removes the inline style on the body tag allow­ing the stylesheet to set the back­ground color. The default code also removes the width prop­erty from the inline style of the bub­ble class so that its width can be set in the stylesheet as well. This should help over­come many of the prob­lems that can’t be solved directly using a stylesheet. You can thank TechTriad.com for fund­ing this new feature.

Down­load: mygooglecal4.zip. Con­tains MyGoogleCal4.php, MyGoogleCal4js.php, mygooglecal4.css, and images. 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. phpinfo.php is used for diag­nos­tic pur­poses to make sure your PHP instal­la­tion is work­ing and that it has the required plu­g­ins. In the archive folder, you can find pre­vi­ous ver­sions of Google’s Javascript and CSS files, in case you want to use those (see MyGoogleCal4js.php).

<?php
/*******************************************************************************
 * FILE: MyGoogleCal4.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal4.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:
 *   03 December 2008 - Original release
 *                      Uses technique from MyGoogleCal2 for all browsers,
 *                      rather than giving IE special treatment.
 *   16 December 2008 - Modified MyGoogleCal4js.php so that the regex does a
 *                      general match rather than specifically look for the
 *                      variable 'Ac'.
 *   Mar--Apr    2009 - Added jQuery for modifying the style after page load
 *   23 June     2009 - Replaced jQuery with Dojo since jQuery, Prototype, and
 *                      MooTools are not compatible
 *   05 July     2009 - Fixed bug to remove width style from bubble
 *                      
 *   
 * ACKNOWLEDGMENTS:
 *   Michael McCall (http://www.castlemccall.com/) for pointing out "htmlembed"
 *   Mike (http://mikahn.com/) for the link to the online CSS formatter
 *   TechTriad.com (http://techtriad.com/) for requesting and funding the 
 *       Javascript code to edit CSS properties and for selflessly letting the
 *       code be published for everyone's use and benefit.
 *   
 *
 * 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/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 = 'mygooglecal4.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="MyGoogleCal4js.php?$1"';  
$buffer = preg_replace($pattern, $replacement, $buffer);

// Add a hook to the window onload function
$pattern = '/}\);}<\/script>/';
$replacement = '}); myGoogleCal();}</script>';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Use DHTML to modify the DOM after the calendar loads
$pattern = '/(<\/head>)/';
$replacement = <<<MGC
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
function myGoogleCal() {
    // remove inline style from body so background-color can be set using the stylesheet
    dojo.removeAttr(dojo.body(),'style');

    // iterate over each bubble and remove the width property from the style attribute
    // so that the width can be set using the stylesheet
    dojo.query('.bubble').forEach(function(node){
        dojo.attr(node, {style:{'width': ''}});
    });

    // see Dojo documentation for other ways to edit DOM
    // http://dojotoolkit.org/
}
</script>
</head>
MGC;
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

?>

If you look at lines 39−−41 in MyGoogleCal4js.php, you’ll see how sim­ple the fix is. No more Xml­HttpRe­quest bugs. Thank you, Google.

<?php header("Content-type: application/x-javascript");
/*******************************************************************************
 * FILE: MyGoogleCal4js.php
 *
 * DESCRIPTION:
 *  Companion file for MyGoogleCal4.php to edit the javascript file that
 *  generates the Google Calendar.
 *   
 * USAGE:
 *  There are no user-editable parameters.
 *
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/
// URL for the javascript
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/" . $_SERVER['QUERY_STRING'];
}

/* If you would like to freeze the calendar version, download the Javascript
 * file using the same method for downloading the CSS file, as described in
 * the main script.  You can find some previous versions in the archive folder.
 * NOTE: You should use the corresponding CSS file as well.
 *
 * Edit and uncomment the following line to freeze the calendar version.
 */
//$url = "http://myserver.tld/path/to/archive/6a3eb8ba4a07edb76f79a18d6bdb8933embedcompiled__en.js";

// Request the javascript
$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);

// Fix URLs in the javascript
$pattern = '/this\.[a-zA-Z]{2}\+"calendar/';
$replacement = '"http://www.google.com/calendar';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Display the javascript
print $buffer;
?>

The instal­la­tion of MyGoogleCal4 is the same as the instal­la­tion for MyGoogleCal2 except you down­load the zip file above. You can ignore step 3 regard­ing the .htac­cess file. As far as I can tell, it’s no longer needed.

134 Responses to “Restyle Google Calendar 4”

  1. c.Yoon said on December 4th, 2008 at 12:19 pm:

    Hi, thanks so much for this resource! I’m won­der­ing… is it pos­si­ble to get the gad­get to dis­play more than four cal­en­dars? (I’m plan­ning to use this to track some gear that I rent.)

  2. Brian said on December 4th, 2008 at 2:10 pm:

    c.Yoon,

    I think all you have to do is add as many src/color pairs as you need in the query string. If there is a limit, then it’s enforced by Google Cal­en­dar, not by this script.

  3. mark said on December 7th, 2008 at 7:53 pm:

    i’m test­ing a cal­en­dar in a 300×300 iframe. when an event is clicked its con­tent doesn’t fit in the iframe.

    is there a way to either resize the event con­tent to fit the iframe (300×300)

    or

    have event load in a popup or larger sec­ond iframe on the same page.

  4. Brian said on December 7th, 2008 at 9:20 pm:

    mark,

    Most of the CSS for the event popup begin with “bub­ble”. How­ever, the width appears to be hard-coded in the Javascript as an inline style. It is not imme­di­ately obvi­ous where in the Javascript this width is set; though I did iden­tify 4 places where 400 explic­itly appears in the code, but that doesn’t guar­an­tee that any of those val­ues will affect the width. If any of those val­ues do cor­re­spond to the width, then it’s just a mat­ter of chang­ing MyGoogleCal4js.php to change the value on-the-fly. Com­pared to that option, it would be much eas­ier to adjust your design and increase the width of the iframe to 400 pixels.

  5. Sarah said on December 9th, 2008 at 4:25 pm:

    I am hav­ing a cou­ple of prob­lems: The first is that the iframe loads this error mes­sage, “Fatal error: Call to unde­fined func­tion curl_init() in /WWW/www/test/arts/calendar/MyGoogleCal4.php on line 80″. I’m not so great with PHP, so haven’t touched it.

    The sec­ond is that I’m not able to look at the orig­i­nal CSS. Accord­ing to the source code the file should be sit­ting at http://www.google.com/calendar/embed/92e1900d06b81f89c98e4647645bdab3embedcompiled.css, but I’m get­ting a 404. I’m mys­ti­fied! Any help is greatly appre­ci­ated. Thanks.

  6. Brian said on December 9th, 2008 at 5:14 pm:

    Sarah,

    How’s the warm weather down under? It just snowed here last night.

    1) Copy the phpinfo.php file to your server and then access that page using your browser. It should dump a bunch of infor­ma­tion regard­ing your PHP instal­la­tion includ­ing what plu­g­ins are installed. Look through the list of plu­g­ins and make sure the curl plu­gin is listed. If it’s not, have your web site admin­is­tra­tor install the plugin.

    2) The orig­i­nal CSS file is actu­ally at: http://www.google.com/calendar/92e1900d06b81f89c98e4647645bdab3embedcompiled.css. I’ll update the code to reflect that change. It used to be that ‘embed’ was required. The CSS file included in the zip is fairly recent.

  7. Greg said on December 10th, 2008 at 12:07 pm:

    I’m lov­ing the new set but was won­der­ing if it was pos­si­ble to get the Month label to dis­play on the month view? It doesn’t mat­ter so much on the agenda as it is dis­played on each agenda item, and the week view has dates over each day, but with­out a month label over the month view the user is left guess­ing what they are look­ing all.

    Thank you,

    Greg

  8. Brian said on December 10th, 2008 at 3:35 pm:

    Greg,

    Could you pro­vide a screen shot? The month label (the tab in the upper right) should be vis­i­ble, unless of course you set showTabs=0 in the query string.

  9. Greg said on December 11th, 2008 at 9:31 am:

    Hey Brian,

    Thank you for reply­ing to my com­ment! Sorry, I prob­a­bly shouldn’t have used the word “label”. I’m talk­ing about the Month name (i.e. “Decem­ber”) that used to cause prob­lems with IE when moused over in MyGoogleCalendar2. I don’t need the cal­en­dar drop­down picker fea­ture, I just need/want the name again. Here is a link to a screen­shot of one of the cal­en­dars I cur­rently have in place with MyGoogleCalendar2: http://www.cccomaha.org/uploads/calendarScreenshot.jpg. I want to move to MyGoogleCalendar4 to fix the IE issue but want to fig­ure this out before spend­ing a chunk of time rework­ing the style sheet.

    Thank you very much,

    Greg

  10. Brian said on December 11th, 2008 at 10:13 am:

    OK Greg,

    The screen­shot def­i­nitely clears things up. That isn’t actu­ally a label; that’s part of the nav­i­ga­tion. I’ve con­firmed that it works both in Fire­fox, IE, and Opera. When you click on it, you should get a mini-calendar display.

    FYI you can’t use the stylesheet from ver­sion 2. Google changed and added some styles. I rec­om­mend first try­ing ver­sion 4 using the included stylesheet and make sure the cal­en­dar is work­ing as expected. Then port your cus­tomiza­tions from ver­sion 2 to 4.

  11. Greg said on December 11th, 2008 at 10:44 am:

    I’m still a lit­tle con­fused. When I uti­lize your MyGoogleCalendar4 files with­out any mod­i­fi­ca­tion this is what I get: http://cccomaha.org/uploads/calendarScreenshot2.jpg. I checked the site with fire­bug and it showed a with the “nav­Spacer” class applied to it but no actual con­tent. You can see where I’m test­ing it out at http://www.cccomaha.org/calendarTest/index.php. I’m not get­ting a cal­en­dar name or drop­down. Could it be in the way I’m embed­ding it?

    And thanks a ton, I really appre­ci­ate all that you’ve done with this workaround.

    –Greg

  12. Brian said on December 11th, 2008 at 10:55 am:

    Yep, in your query string you have showDate=0. Just remove that and you should be good to go.

  13. Greg said on December 11th, 2008 at 2:52 pm:

    Alright Brian, you are now my favorite blogger/developer of all time. You are da man! Thank you so much!

    Sin­cerely,

    Greg
    Web Man­ager
    Christ Com­mu­nity Church

  14. Randy said on December 16th, 2008 at 12:37 pm:

    So has any­one else had prob­lems get­ting the con­tent to refresh, If I try to change view to agenda mode it freezes, or if I try to change the date in monthly view. It loads con­tent cor­rectly on load but after that it is not able to dynam­i­cally load the con­tent? Any thoughts?

  15. Brian said on December 16th, 2008 at 12:54 pm:

    Looks like Google changed their code again. Hope­fully the fix won’t take long. I’ll keep you guys posted. Thanks for the headsup, Randy.

  16. Brian said on December 16th, 2008 at 1:29 pm:

    I updated the zip file. I made a change to line 30 of MyGoogleCal4js.php which fixes the prob­lem. Instead of look­ing for ‘Ac’, the script will match any 2 let­ters. Please let me know if you guys run into any problems.

  17. padraig said on December 21st, 2008 at 3:35 pm:

    Thanks for this Brian — very help­ful and it’s worked for me. (I haven’t man­aged to track down the ele­ment for the top of the ‘today’ cell in the monthly view, but apart from that it looks good.)

  18. Brian said on December 21st, 2008 at 10:30 pm:

    @padraig

    You’re wel­come. Fire­fox + Fire­bug plu­gin makes track­ing down ele­ments easy. The plu­gin also lets you edit the CSS on the fly so you can exper­i­ment before putting the code into the stylesheet.

  19. Bas said on December 22nd, 2008 at 7:15 am:

    I was tin­ker­ing myself with the com­piled js of the new cal­en­dar until i found your preg_replace pat­tern. Works nicely, now you can actu­ally read the ouput ; -) !

    Greet­ings from .nl

  20. Andzins said on December 23rd, 2008 at 5:23 am:

    Hi! This is a great! Thanks a lot!
    But I have a small (I hope so) prob­lem. When I embed stan­dart google cal­en­dar with two cal­en­dars in it, it works fine, but when I change the src to mygooglecal4.php it shows only one of those cal­en­dars. Could you say what could be wrong?
    Thank you!
    Andzins

  21. Andzins said on December 23rd, 2008 at 5:25 am:

    Hmm… I’m sory. I didn’t eny­thing spe­cial, but it just works now!
    I’m sorry!
    Andzins

  22. Ken said on December 23rd, 2008 at 6:47 am:

    Hi Brian,
    Great work! Every­thing works won­der­fully, how­ever ;), it seems to be ignor­ing the color in the query. I may be doing some­thing wrong since I am not shar­ing my cal­en­dar, but using the pri­vate ticket, but all other vari­ables work fine.

    I have tried mov­ing the color before the pvttk and after, mov­ing scr and color to the end, noth­ing. Any thoughts?

    Thanks,
    Ken

  23. Sherrie said on December 23rd, 2008 at 1:04 pm:

    I feel very lost because I did as you said to and the server does sup­port curl, yet the cal­en­dar does not show up at all.

    please help me

    Thanks,
    Sherrie

  24. Brian said on December 23rd, 2008 at 4:23 pm:

    @Sherrie

    For starters, you need to include the “src” query string para­me­ter. See lines 9−−10 for basic usage. How­ever, before embed­ding, test the cal­en­dar by access­ing MyGoogleCal4.php directly by typ­ing the URL:

    http://uaf-web-test.freehostia.com/MyGoogleCal4.php?src=user%40domain.tld

    assum­ing you saved the files to the root of your web site. Replace user%40domain.tld with your gmail account. The cal­en­dar should take up the entire browser window.

  25. Lisa said on January 4th, 2009 at 10:45 am:

    Hi Brian,
    I was search­ing for ages on google to find some way of re-skinning the google cal­en­dar. Finally I found this, so thanks! :-)

    I am now try­ing to add the google cal­en­dar wid­get onto my home­page to show a sum­mary list of events. How­ever, I’m hav­ing the same issue with this — At the moment I have a hor­ri­ble blue box on my gen­er­ally brown website!

    Have you any ideas/advice as to how I can re-skin this?

    Thanks,
    Lisa

  26. Lisa said on January 4th, 2009 at 3:53 pm:

    Hi again,

    My post above can be ignored now as I finally man­aged to find some­thing that worked per­fectly and enabled me com­plete con­trol over the lay­out of the google Cal­en­dar widget.

    So now I have both a google cal­en­dar page and also a google cal­en­dar wid­get on my home­page, which is exactly what I wanted! Not bad for a day’s work :-)

    If any­one is inter­ested in the google cal­en­dar wid­get I used, it can be found here: http://ottodestruct.com/blog/2006/04/18/google-calendar-widget/

    Thanks again,

    Lisa

  27. Brian said on January 4th, 2009 at 7:33 pm:

    Glad to hear you worked things out, Lisa. For what it’s worth, you can read my post on the Google Cal­en­dar Gad­get. It’s really not sup­ported by Google any­more since you can achieve almost the same thing using the Google Cal­en­dar and adjust­ing the dimen­sions and turn­ing on/off the var­i­ous ele­ments. To put the Google Cal­en­dar in your Word­Press side­bar, you can just paste the HTML into the built-in Text Wid­get. This method works with all ver­sions of WordPress.

  28. Chris said on January 11th, 2009 at 3:03 am:

    Hi,

    Sorry to ask a sim­ple ques­tion: I need to increase the font size of the cal­en­dar but I can’t find the part of the css which will do that. Can you help?

    Many thanks,
    Chris

  29. Chris said on January 11th, 2009 at 6:58 am:

    Hi,

    I think solved my ques­tion. To increase the size of the text in the cal­en­dar you change the fol­low­ing sec­tion of code:
    .calendar-container {
    font-family:Arial, sans-serif;
    font-size:small;
    }
    And make it font-size:medium

    Chris

  30. Joey said on January 12th, 2009 at 12:34 am:

    I’ve imple­mented this “hack” exactly as described, and it appears to be work­ing great except for one small issue. Every once-in-awhile, the cal­en­der will dis­play a mes­sage that says “this page has moved” with a new link included… When you click on the link, it takes you to the proper cal­en­dar, but the col­or­ing is back to the orig­i­nal google col­ors, etc. The link appears to be gen­er­ated by google — but I was won­der­ing if any­one know whether this is a typ­i­cal google issues or if it’s related to this re-styling script? Thanks!

  31. Randy said on January 12th, 2009 at 4:07 pm:

    I have not seen any issue of the kind, it sounds like it might be an error in imple­ment­ing the script of the way that your google account is set up… Is it a pub­lic cal­en­dar, if not it might be authen­ti­ca­tion that is caus­ing the error? I am not sure I haven’t tried this script in that way. Over­all I haven’t had any issues with the code.

  32. Lisa said on January 18th, 2009 at 2:56 pm:

    Hi, I’m back again with another ques­tion, sorry!
    I was just won­der­ing if there is a way that I can make the ‘agenda’ view dis­play all of the events at once? …cur­rently you have to keep click­ing the ‘look for more’ link until events appear…

    …or per­haps is there a way of show­ing by default, all events within the next year, instead of within the next month?

    Thanks,
    Lisa :-)

  33. Brian said on January 18th, 2009 at 8:53 pm:

    Sorry Lisa,

    I don’t know of a way to do it. I think Google defaults to the cur­rent month only.

  34. Corry said on January 20th, 2009 at 4:02 pm:

    Hi there, I’m look­ing at using this approach on the web site I’m work­ing on.

    I can’t fig­ure out if there any way to make the actual cal­en­dars imported from Google match your own cus­tom colours. I’ve tried to alter the color=%232900D3 sec­tions of the embed code but that either made all the cal­en­dars the same colour (one of Google’s default cal­en­dar colours) or doesn’t dis­play that calendar’s data at all. Is there a way to choose your own colours for the dis­play of events?

    Cheers,
    Corry

  35. Ben said on January 20th, 2009 at 4:04 pm:

    Hi There,

    Has any­one found the CSS attribute that con­trols the back­ground color? The iframe code which embeds the cal­en­dar into the your web page seems to over­ride any css I’ve found.

    Any help would be much appreciated.

    Cheers

    Ben

  36. Brian said on January 20th, 2009 at 11:39 pm:

    @Corry

    The color attribute in the URL will only change the color for events. It will not change the col­ors in the rest of the cal­en­dar. To do that, you have to edit the CSS file.

    @Ben

    There’s an inline style applied to the body tag. I should change the code in MyGoogleCal4js.php to account for that.

  37. Ben said on January 21st, 2009 at 6:34 pm:

    Thanks Brain,

    Sorry, still a lit­tle con­fused — does that mean it’s only pos­si­ble if you we’re to change the MyGoogleCal4js.php file or should I look for the inline style?

    Thanks for you help!

    Cheers

    Ben

  38. Brian said on January 21st, 2009 at 8:30 pm:

    Well I’ve already found out the pat­tern to search for which is “#fff”, but it’s in two loca­tions so I don’t know if one or both need to be replaced. Since this isn’t a press­ing bug fix, I’ll prob­a­bly look at it this week­end at the ear­li­est. The change is rather sim­ple if you want to do it your­self. You just need to add another pattern-replacement-buffer code block to the MyGoogleCal4js.php file. Change the regex to search for #fff and replace it with what­ever color you want. The regex will be the “hard” part since you have to cre­ate a pat­tern to pick one of the instances if the other is used for some­thing else. The other option would be to put the code block in MyGoogle4.php and replace the pat­tern ‘style=“background-color: #ffffff“‘ with an empty string, and then you can add a body style to your CSS.

  39. Corry said on January 21st, 2009 at 10:02 pm:

    Thanks Brian, but I realise I need to adjust the CSS to change the colours for the cal­en­dar sur­rounds! Sorry if my first post was unclear.

    It’s the actual event colour I want to change — and not be restricted to Google’s event colours — but it doesn’t work. Are we def­i­nitely restricted to our events from dif­fer­ent cal­en­dars only being ren­dered in the Google cal­en­dar event colours? Or is it pos­si­ble and I am there­fore mak­ing some mis­take in adjust­ing the colour in the embed code?

  40. Brian said on January 21st, 2009 at 11:12 pm:

    Ah yes, it would appear Google lim­its you to 21 pre­de­fined col­ors. Fur­ther­more, they style the events using an inline style. The only way to fix that is to use a pattern-replacement-buffer code block in MyGoogleCal4.php. You’ll have to search for a pat­tern like ‘style=“background-color: rgb(230, 128, 77);“‘ in div tags that have a class name that looks like “st-evpX” where X is a num­ber for the event start­ing with 1. This may be a lit­tle off but the regex should look some­thing like /<div class=“st-evp.*?style=“background-color: (.*?);”/ and then the replace­ment will be what­ever color you want. You’ll need to do another one for ‘style=“color: ‘.

  41. Corry said on January 22nd, 2009 at 7:26 pm:

    Entered the brave new world of regex’s and the only class I could find in the buffer was this one:
    class=“locale-en_gb locale-en “
    The colour encod­ing for events seemed to be done this way:
    {“color”:”#1b887a“
    Replac­ing with any other colour code only resulted in it chang­ing to the colour of one of the other cal­en­dars or it stayed in its Google selected colour … so same result as fid­dling with the embed code!

  42. chris said on January 26th, 2009 at 6:04 am:

    hey,
    this script was sooooo use­ful. I’ve used it to pre­vent the google cal­en­dar from events auto­mat­i­clly trail­ing of the end of the line

  43. RC said on January 30th, 2009 at 3:30 pm:

    Thank you so much for post­ing this. The embed­ded cal­en­dar helper is a slick lit­tle tool but not being able to get at the code behind it pre­sented a major prob­lem to me. This helped me to get the embed­ded cal­en­dar to behave in exactly the way I wanted.

  44. knd said on January 31st, 2009 at 4:37 pm:

    Does any­one here know of any PHP/Ajax/API solu­tion that would over­come one of the main lim­i­ta­tion of the Google cal­en­dar, namely that when one makes his/her cal­en­dar pub­lic with the “Share only my free/busy infor­ma­tion (Hide details)” option, there seem to be no way for any­one else to see when the events end. That ren­ders the whole option use­less (what the point of mak­ing pub­lic the start but not the end of the time per­diods when one is busy ?!).

    I was think of some­thing like a script that would retrieve the full (pri­vate) info but would then blank the pri­vate details to dis­play a publicly-shareable calendar.

    This would be really helpful!

  45. Chris Sarbora said on February 2nd, 2009 at 12:24 pm:

    Thank you, thank you, thank you!! I have been bang­ing my head try­ing to cre­ate this exact script for two days now, and I hadn’t even got­ten into the cus­tomiza­tion parts. Ver­sion 4 works flaw­lessly. I will check back soon with an exam­ple of a pretty cus­tomized calendar :)

  46. Chris Sarbora said on February 2nd, 2009 at 10:14 pm:

    http://www.chrissarbora.com/schedule/

    Here’s a pretty cus­tomized exam­ple of how I used your code to embed a cus­tomized cal­en­dar. I ended up chang­ing the CSS file to be a PHP script as well, so that I could use vari­ables for the col­ors — this allowed me to quickly change whole sets of col­ors. I will even­tu­ally replace the images as well. Thank you again!

  47. Michael said on February 8th, 2009 at 2:02 pm:

    I have imple­mented this and it works most of the time, but every once in a while it will give me an error in the iframe area:

    Moved Temporarily

    The doc­u­ment has moved here.

    Any idea how to fix this so it doesn’t hap­pen?
    Thanks!

  48. Michael said on February 11th, 2009 at 5:16 pm:

    This is neat…going back to the bub­ble issue, you said,
    » Most of the CSS for the event popup begin with “bub­ble”. How­ever, the width appears to be hard-coded in the Javascript as an inline style. It is not imme­di­ately obvi­ous where in the Javascript this width is set; though I did iden­tify 4 places where 400 explic­itly appears in the code, but that doesn’t guar­an­tee that any of those val­ues will affect the width. If any of those val­ues do cor­re­spond to the width, then it’s just a mat­ter of chang­ing MyGoogleCal4js.php to change the value on-the-fly. Com­pared to that option, it would be much eas­ier to adjust your design and increase the width of the iframe to 400 pixels.«

    Can you explain what you are talk­ing about — hard­coded where? Is the file acces­si­ble? If the val­ues where changed in MyGoogleCal4js.php, can you give a sin­gle value exam­ple of how and where that is done?

    Thanks!

  49. Tom said on February 12th, 2009 at 8:41 am:

    Is it pos­si­ble to use this change a piece of code to hide cer­tain event details. Ex: I don’t want to show the loca­tion of each event when I embed the cal­en­dar on my site. Are these details customizable?

  50. Brian said on February 12th, 2009 at 10:17 pm:

    @Michael

    In line 97 of MyGoogleCal4.php, you can see where the script replaces the src of the javascript with MyGoogleCal4js.php with the orig­i­nal src as a para­me­ter to MyGoogleCal4js.php. This allows MyGoogleCal4js.php to rewrite the orig­i­nal javascript file which you can down­load sep­a­rately if you want. Just load your cal­en­dar in a browser with­out the script and view the source to find the URL. Any­way, with regards to the “bub­ble” exam­ple, you would want to add a pattern-replacement-buffer block to MyGoogleCal4js.php like so:

    // Change width of “bub­bles” in the javascript
    $pat­tern = ‘/400/’;
    $replace­ment = ‘200’;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    That would change all instances of ‘400’ with ‘200’. I have to warn you though, Google’s code is obfus­cated and I don’t rec­om­mend read­ing it unless you’re up for a challenge.

    @Tom

    A quick and dirty way would be to cre­ate a css style .event-where { dis­play: none }. That should hide the loca­tion of the event. Unfor­tu­nately, it’ll leave the “Where” label behind. There’s no way to select that label using a CSS adja­cent selec­tor because the label comes before the .event-where ele­ment. Fur­ther­more, there’s no way to select the par­ent using CSS either.

    You poten­tially could use JavaScript (I recom­ment Pro­to­type or JQuery) to select the ele­ment with the class .event-where, then select the par­ent, and finally apply a ‘dis­play: none’ style to the par­ent when the doc­u­ment loads. How­ever, you’d have to mod­ify MyGoogleCal4.php to inject a script tag to load your javascript plus you have to hook into document.onload event with­out squash­ing Google Calendar.

  51. Eric said on February 16th, 2009 at 3:52 pm:

    I can not get the month pull down to work here.
    http://www.sunsetbiblecamp.org/events1.htm

  52. Eric said on February 17th, 2009 at 10:02 am:

    Found a work around for me for the above issue. The only thing that remains is the right hand side of the bub­ble when you click an event is miss­ing the border.

  53. Joshua said on February 17th, 2009 at 2:11 pm:

    I keep get­ting a “no input file spec­i­fied” error.…. as the src i’ve entered my google cal account name… Any ideas?

  54. Brian said on February 17th, 2009 at 3:58 pm:

    @Eric

    Yes, it would appear the cal­en­dar drop­down is non-functional. I rec­om­mend adding showDate=0 to your query string to sup­press it’s appear­ance. Another option would be to hide just the arrow by adding a style to your CSS, #dateMenuArrow1 { dis­play: none; }.

    @Joshua

    Most likely this is due to a PHP con­fig­u­ra­tion prob­lem. Upload the included phpinfo.php file to your web server and load the page using your browser. If it works, you should get a dump of your PHP’s con­fig­u­ra­tion like ver­sion num­ber and installed mod­ules. If it doesn’t, you should con­sult with your sys­tem administrator.

  55. Eric said on February 17th, 2009 at 5:11 pm:

    Thank you I got it fixed by using the newest .css I may have found a work around to the tem­porar­ily moved prob­lem as well. See my page at:
    http://www.sunsetbiblecamp.org/events.htm

  56. Joshua said on February 19th, 2009 at 12:42 pm:

    I’m get­ting a fatal error say func­tion not known at the first curl func­tion. I assumed this was a cause my php didnt have curl exten­sion enabled but i enabled it and it’s still doing the same thing. Any hints on how to fix and or diag­nose this?

  57. Brian said on February 20th, 2009 at 11:58 am:

    @Joshua

    This guy’s prob­lem sounds sim­i­lar to yours. A depen­dency was miss­ing, namely libidn. After installing that, his error went away. I do not know if that will work for you, but it’s worth a shot.

    http://curl.phptrack.com/forum/viewtopic.php?t=51&highlight=install

  58. Tyler said on February 21st, 2009 at 5:30 pm:

    Hello, Could you give me & every­one an exam­ple of a query string. Also, is there a way to hide just the “week” tab?

    Great job on the script!

  59. kev said on February 24th, 2009 at 1:51 am:

    If the lan­guage in my cal­en­dar set­tings on google.com are set to ger­man, the script doesn’t work. Set­ting to US eng­lish fixes this. I thus assume it may not work with any other lan­guage. Maybe you have stated this some­where and I’ve over­looked it. Any­how, thanks for your work!!

  60. Tim said on March 3rd, 2009 at 6:02 pm:

    I get an error on the above web­site? and a white screen?

    Any one have any ideas?

    thanks.

  61. Tim said on March 3rd, 2009 at 9:44 pm:

    Hey i fixed the error.

    Is it pos­si­ble to show the cal­en­der in mini mode?

    Also if there is an appoint­ment on a day I would like to show that days head­ing in red ie cant book.

    Thanks.

  62. Brian said on March 3rd, 2009 at 10:42 pm:

    If you want a mini-mode, I rec­om­mend you check out Google Cal­en­dar Gadget

    http://www.lindenlan.net/2007/06/18/restyle-google-calendar-gadget/

  63. John Marshall said on March 7th, 2009 at 11:58 am:

    Hi,

    I have a cal­en­dar set up with your excel­lent script and it dis­played every­thing with no prob­lem. I noticed today, how­ever, the text of cal­en­dar entries is being dis­played in the same colour as the back­ground high­light (effec­tively mak­ing them invis­i­ble!). The text shows up if you high­light the entry and when you click it the entry still dis­plays in the bub­ble — have Google changed some­thing do you know?

    Regards,

    John

  64. Brian said on March 8th, 2009 at 3:01 pm:

    @John

    I don’t know if Google changed any­thing. My rec­om­men­da­tion is that you search in the included stylesheet for the style that con­trols the text color or cre­ate your own. Firebug’s Inspect fea­ture will help you locate the DOM ele­ment quickly.

  65. Travis said on March 8th, 2009 at 6:10 pm:

    I can’t tell you how grate­ful I am. This is exactly what I need.

    Every­thing is setup great but I can’t seem to get the icons to load e.g. printer, arrows etc.

    Has any­one else had this problem?

  66. Brian said on March 8th, 2009 at 7:57 pm:

    @Travis

    Make sure the image path is cor­rect. There should be an “images” sub­folder in the folder that con­tains MyGoogleCal4.php.

  67. Travis said on March 8th, 2009 at 10:02 pm:

    I can’t thank you enough, I owe you big time.

    I’ll be sure you upload a link when I’m done play­ing around with it.

    Thank you

  68. Josh said on March 9th, 2009 at 3:20 pm:

    The whole rea­son I am try­ing to use your script is because I could not get the month drop-down to dis­play from the orig­i­nal google ver­sion of the embed­ded cal­en­dar. This was going to be my first step in restyling the cal­en­dar, but I can­not get that to show up at all. Can you please take a look at my cal­en­dar at http://www.pfnaz.org/calendar and let me know what I am miss­ing? Thanks!

  69. Jim in DC said on March 17th, 2009 at 10:39 pm:

    Con­trary to the descrip­tion, the week view doesn’t work with this version.

    Please see:

    http://02d0ffd.netsolhost.com/ncf/calendar.php

    My week view is all one color and the descrip­tion is a dark blue with black letters…

  70. Jim in DC said on March 17th, 2009 at 10:51 pm:

    Hi, I get a weird week view when I use the script. The whole week view is all one color. Please see which uses your script:

    http://02d0ffd.netsolhost.com/ncf/calendar.php

    and embe­ded cal­en­dar with­out the script…

    http://www.nationalcapitalfarms.org/calendar_Default.html

    Thanks for your help…

  71. Jason from UK said on March 24th, 2009 at 5:35 pm:

    Hi. I am try­ing to style the events using a pattern-replacement-buffer code block in MyGoogleCal4.php as described above but it doesn’t want to work. The code I am try­ing is:

    $pat­tern = ‘/style=\“color: rgb\(41, 82, 163\);\” class=\“ca-evp/’;
    $replace­ment = ‘style=\“color: rgb(255, 255, 255);\” class=\“ca-evp’;
    $buffer = preg_replace($pattern, $replace­ment, $buffer);

    I have tested the pat­tern in a Regex pro­gram (RegEx­hibit for Mac) and con­firmed that it should match what I want to change, but I still just get the default colours.

    Can any­one pro­vide fur­ther assis­tance? Thanks.

  72. Mark said on March 24th, 2009 at 6:40 pm:

    I was hav­ing the same prob­lem where the right bor­der of the bub­bles wasn’t show­ing. The css code for the bub­bles is miss­ing in the MyGoogleCal4.css file. Sim­ply look at the css from google and copy those miss­ing bub­ble ele­ments. Prob­lem solved…

  73. Brian said on March 25th, 2009 at 11:35 pm:

    @Jason

    That won’t work since the source is com­prised pri­mar­ily of <script> ele­ments. All the HTML is dynam­i­cally gen­er­ated from the Javascript after the PHP script is run.

  74. Jason from UK said on March 26th, 2009 at 2:57 am:

    @Brian

    That’s what I started to think after I posted my com­ment, but was using one of your pre­vi­ous com­ments as a ref­er­ence (#40 above).

    In case then, I pre­sume we are stuck with the default Google styling on all ele­ments that use in-line styles?

  75. Brian said on March 26th, 2009 at 9:17 am:

    @Jason

    I may have jumped the gun on that one. You can use a pattern-replacement block but it’ll have to go in MyGoogleCal4js.php, and you’d have to fig­ure out where in that code it con­trols those colors.

  76. Jim Charles said on March 26th, 2009 at 3:11 pm:

    I apolo­gies if I am just miss­ing some­thing obvi­ous, but I used your method to cus­tomize the cal­en­dar on http://www.checkersbistro.com . It works great except in IE, the same as oth­ers have reported, the event text changes to be the same color as the high­light. It works great on any browser but IE. Any Ideas?
    Thanks for doing this it makes the page look so much bet­ter with a match­ing calendar!

  77. Brian said on March 26th, 2009 at 9:56 pm:

    @Jim

    Can you pro­vide a link to your work-in-progress? It’s bet­ter if I can see the prob­lem first hand.

  78. Jim Charles said on March 27th, 2009 at 8:11 am:

    http://www.checkersbistro.com.index2.html
    Thanks for your help!

  79. Jim Charles said on March 27th, 2009 at 8:13 am:

    Sorry, I mistyped the / http://www.checkersbistro.com/index2.html

  80. Jason from UK said on March 27th, 2009 at 9:12 am:

    @Jim Charles

    Hey, how did you man­age to change the color of the event list­ings in the month view from the default Google blue? That’s the one thing I can’t seem to do as it’s an inline style.

  81. Jason from UK said on March 27th, 2009 at 9:14 am:

    Whoops, I for­got to add the link to my cal­en­dar as an example.

    Here it is:

    http://www.scottishtheatreforum.net/forum/index.php?action=eventCalendar

  82. Jason from UK said on March 27th, 2009 at 9:24 am:

    @Brian / @Jim Charles

    Never mind Guys. I’m a mup­pet. You change the styling of these using the “color” para­me­ter in the URL. Can’t believe I missed that. Altho you are lim­ited as above to a set num­ber of colurs. Sorry for wast­ing your time guys.

  83. Nick Smith said on March 31st, 2009 at 7:38 am:

    Hi I’m get­ting this error upon instal­la­tion. Is this because I need to install Curl?

    Fatal error: Call to unde­fined func­tion curl_init() in /home/lincolns/public_html/mygooglecal/MyGoogleCal4.php on line 84

  84. Brian said on March 31st, 2009 at 8:06 am:

    @Nick

    Most likely. You can use the included phpinfo.php file to con­firm if curl is installed or not.

  85. Nick Smith said on March 31st, 2009 at 8:43 am:

    Thanks Brian, how do I get this installed? Will it be down to my host­ing provider? who­ever man­ages the server?

  86. Brian said on March 31st, 2009 at 9:35 am:

    @Nick

    Yes, con­sult your sysadmin/hosting provider.

  87. Bill said on April 4th, 2009 at 1:23 pm:

    I have the same prob­lem that Jim described above: “in IE, the event text changes to be the same color as the high­light. It works great on any browser but IE.” Any help would be greatly appre­ci­ated. Thanks a lot.

  88. Brewster said on April 16th, 2009 at 6:09 pm:

    I am too hav­ing the prob­lem with the week view. Events that are past a cer­tain time can­not be seen since there are no scroll­bars, and the whole page is one color.

    The link in the pre­vi­ous men­tion of this prob­lem shows the prob­lem was fixed.

  89. Brewster said on April 16th, 2009 at 6:26 pm:

    and i also noticed that the drop­down for the date picker doesnt seem to work.

  90. Mike said on April 27th, 2009 at 7:49 am:

    To get the dates work­ing again, fol­low the instruc­tions in the php file to update your CSS. Google changed a few things around on us.

  91. Raul said on April 28th, 2009 at 11:00 am:

    Any­way to avoid caching the cal­en­dar content?

  92. Bill said on April 29th, 2009 at 8:25 am:

    I am still hav­ing the same prob­lem that Jim described above: “in IE, the event text changes to be the same color as the high­light. It works great on any browser but IE.” Also, in IE only, the month advance arrows dis­ap­pear.
    Here is the url: http://www.northfieldschool.com/calendar.html. I really appre­ci­ate all of your work on mygoogle­cal. Thank you very much.

  93. Bill said on April 29th, 2009 at 12:19 pm:

    Hi,

    I fig­ured it out. Thanks again.

  94. Zakary said on April 29th, 2009 at 4:09 pm:

    it does work, and i can see that oth­ers have fig­ured out how to get the mini cal­en­dar to par­tic­i­pate and the week view as well, but i am clue­less on what that might be.

  95. Zakary said on April 29th, 2009 at 4:13 pm:

    never mind, it sud­denly par­tic­i­pated .. maybe i needed to clear my cache.

  96. Pierre Plante said on April 30th, 2009 at 7:27 am:

    Hello,

    Restyle Google Cal­en­dar 4 is a great script. I saw him run on a web­site and I would use it too … but I can not. (GCal­en­dar 2.0.1 / Joomla 1.5.10)

    I want to use use the Cus­tom CSS and your script for edition.

    I have no prob­lem to dis­play the Google cal­en­dar on my Web site (cur­rently on local­host) when Cus­tom CSS is off, but when is On, the cal­en­dar is not displayed.

    On the code page, MyGoogleCal4.php seems to be there but noth­ing is displayed.

    Have you any idea to solve this prob­lem and start mygooglecal4.css.

    Thank you for your help

    Pierre

  97. Pierre said on May 1st, 2009 at 2:03 pm:

    Ok, I solved the prob­lem sim­ply by acti­vat­ing curl.

    Pierre

  98. Phil said on May 5th, 2009 at 9:51 am:

    First, awe­some tool! Thanks for your work on it and shar­ing it with the world. Regard­ing the date drop­down issue, I’m not get­ting it to work either. My server is run­ning PHP ver­sion 5.2.9 and I haven’t exam­ined what plug ins are required. If it helps, here is the error I get when I click on the drop­down button:

    Error: a.aa is not a func­tion
    Source File: http://www.cpcky.org/calendar/MyGoogleCal4js.php?418e9f0472d87c0bcaa3f1bde835d6f0embedcompiled__en.js
    Line: 109

    Might be an improp­erly parsed parameter?

  99. Phil said on May 5th, 2009 at 9:53 am:

    Oh, here is the link to the cal­en­dar display:

    http://www.cpcky.org/index.php?id=gmcalendar

    Here is some info about cURL on my server:

    cURL sup­port enabled
    cURL Infor­ma­tion libcurl/7.19.4 OpenSSL/0.9.8i zlib/1.2.1.2 libidn/0.5.6

  100. Alan said on May 19th, 2009 at 8:27 am:

    Seems that Google is on to you at this point. The exam­ples above now have a graphic over­lay­ing the bub­bles… Why they won’t just add a ref­er­ence for a cus­tom css file is beyond me.

  101. Brian said on May 19th, 2009 at 9:03 am:

    @Alan

    Well Google Cal­en­dar (like many Google ser­vices) is still in “Beta”. No sur­prise. Just down­load the lat­est CSS file per instruc­tions in the script com­ments, make your cus­tomiza­tions, and you should be good to go.

  102. menosketiago said on May 23rd, 2009 at 10:11 am:

    Hi there Brian,

    I’m using your hack to change the CSS of a google cal I’ve embe­ded on my WordPress.

    The thing is taht some­thing is mess­ing up the futher info win­dows that open when you click on an event.

    http://www.criatividadeportuguesa.org/ophiusa/agenda/

    Is there a way to fix this? (I’m really noob at php or js)

    Thanks for your work any­ways mate,
    Tiago

  103. Phil said on May 23rd, 2009 at 10:17 pm:

    Not sure what’s hap­pen­ing, but when I click on an event in the month view, I get a bizarre pop-up with mul­ti­ple over­lap­ping cap­tion images (just the bot­tom of the cap­tion bub­ble). Any body else encounter this?

  104. Brian said on May 23rd, 2009 at 10:25 pm:

    @menosketiago and Phil

    If you encounter visual or func­tional anom­alies, espe­cially after the cal­en­dar was work­ing fine, that’s usu­ally a sign that Google made an update. At which point, you should update your CSS file per the instruc­tions listed in the comments.

    I believe Google has made an update and that the CSS file in the ZIP file is out-of-date. That’s why include the dis­claimer that the CSS file may not be up-to-date and pro­vide instruc­tions in the com­ments on how to down­load the most recent version.

  105. Phil said on May 24th, 2009 at 7:34 am:

    You did say that. I should have picked up on it. Thanks for being patient with the ter­mi­nally slow. :-)

  106. menosketiago said on May 24th, 2009 at 3:37 pm:

    Ups, then they made just after I’ve down­loaded the css from their site LOL

    Re-checking :D

    Thanks ;)

  107. Alex said on May 27th, 2009 at 5:12 am:

    Yes, Google have done some­thing a bit funny.

    I was hav­ing prob­lems with the fur­ther info dia­log (loads of over­lap­ping images), so I got the lat­est CSS, but the fur­ther info dia­log now has the prob­lem of being stretched ver­ti­cally nearly the height of the cal­en­der; it’s width it’s way too short.

  108. Brian said on May 27th, 2009 at 9:22 am:

    @Alex

    In MyGoogleCal.php, remove or com­ment out the javascript where the width style is removed (lines 121–124). Alter­na­tively, go into the CSS file and add/change the width prop­erty in the .bub­ble style.

  109. Alex said on May 27th, 2009 at 9:45 am:

    Ah, as an addi­tion to above, I’ve test this on OS X, the prob­lem is when Safari, either 3 or 4, tries to view to fur­ther info window.

    This prob­lem doesn’t occur in Fire­fox. The prob­lem also doesn’t occur when view­ing a cal­en­dar at the nor­mal google.com emed address (http://www.google.com/calendar/embed?src=email@address.tld) in Safari 3 or 4.

  110. Alex said on May 27th, 2009 at 1:25 pm:

    @Brian

    Com­ment out the Js, worked a charm. Thanks very much!

  111. T said on June 4th, 2009 at 7:15 am:

    Just found this site, it is amaz­ing. I have read through the entire blog and I am unable to get past this error.

    Not Found

    The requested URL /mygooglecal4/mygooglecal4.php 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.

    has any­one ran into this one yet? I also updated the .css and ran the phpinfo to make sure I have all the server require­ments. Every­thing looked good.

  112. Brian said on June 4th, 2009 at 1:04 pm:

    @T

    Make sure the src of the iframe is cor­rect and that the file exists at that path loca­tion. If your iframe src equals “/mygooglecal4/mygooglecal4.php”, the lead­ing slash means to start the path at the root of the web­site. If you’re try­ing to place the script file rel­a­tive to the page that con­tains the iframe, you’ll need to remove the lead­ing slash. With­out see­ing the actual site, I can only guess that’s the problem.

  113. T said on June 4th, 2009 at 6:39 pm:

    BTW I solved my last post, was a sim­ple case issue. Sorry, I got a new issue though. Using Firefox/Firebug will help you find every­thing, except for the color of the title of the Cal­en­dar? Below is the style code I get from Fire­bug. I saw that Greg from post num­ber 11 was able to change the color of his title. I looked at his css and the color change was under .title in file main.css? Does not even look like its attached to Google Cal­en­dar? Has any­body tried to change the color title, or no of a resource that describes the css? Here is what Fire­bug picks up when I inspect my Google Cal­en­dar Title.

    element.style {
    font-family:Arial,Verdana,Helvetica,sans-serif;
    font-weight:bold;
    padding-left:2px;
    }

  114. T said on June 4th, 2009 at 6:41 pm:

    Thanks for the reply Brian! I just had the case mixed up. I cased the file as ‘mygooglecal4.php’

    It should definetely be MyGoogleCal4.php

    Thanks again.

  115. Brian said on June 4th, 2009 at 8:54 pm:

    @T

    Any­thing with element.style is an inline style. You’ll have to change or remove the style using the jQuery method for those spe­cific styles. Since color does not appear to be set inline, you should be able to set it in the stylesheet.

  116. T said on June 4th, 2009 at 11:48 pm:

    @ Brian

    Thanks again for the reply Brian. I looked in the doc­u­men­ta­tion to try and under­stand how to use the JQuery method. I have never done this and have not been able to find out exactly what to do? Can you pro­vide and extra detailed expla­na­tion for this, or point me to some read­ing materials?

    Thanks Brian!

  117. leslie said on June 13th, 2009 at 8:38 am:

    From today mygoogle cal. stoped work­ing? I can­not list the months and the cal­en­dar is not react­ing on mouse click.

    Yes­ter­day was every­thing ok. Its the prob­lem on my side? Does it work for the others?

    Thanks.

  118. Alex said on June 14th, 2009 at 5:10 am:

    Yes, I get that prob­lem too leslie. I haven’t checked my cal­en­dar every day, but I assume, as it’s the same prob­lem, that it occured recently.

  119. Thomas said on June 15th, 2009 at 4:49 pm:

    Yah I can con­firm that prob­lem. Was work­ing on Fri­day June 12th. Now not respond­ing to clicks in all browsers.

  120. Thomas said on June 15th, 2009 at 4:58 pm:

    Found the fol­low­ing solu­tion to the prob­lem:
    com­ment out lines 110 — 136 in the MyGoogleCal4.php file. That seems to fix the prob­lems at the expense of not being able to con­trol the bub­ble width and body style.

  121. Nick said on June 18th, 2009 at 2:36 pm:

    Yeah. I have the same prob­lem. Noth­ing is react­ing on mouse click. Any­one else? Is this just us three?

  122. Brian said on June 18th, 2009 at 2:54 pm:

    @Everyone

    I’ll look into try­ing to solve the prob­lem this week­end. I’ve been a lit­tle busy this week. Mean­while, please fol­low Thomas’ lead above. That actu­ally gives me a clue where to start.

    Just a reminder, there is a “Hire Me” link at the top. Finan­cial incen­tives are a good moti­va­tor as I’m sure most of you agree. ;-)

  123. Nick said on June 18th, 2009 at 3:35 pm:

    @Thomas

    That didn’t work for me. The bub­ble is all screwed up. The images are messed up when I click on it. Just installed MyGoogleCal4 today. Makes me so mad that Google doesn’t have any easy way to just sim­ply change the css for their cal­en­dar. Uugh!

  124. Rod said on June 22nd, 2009 at 11:26 am:

    I am using the joomla plu­gin gcal­en­dar which is based off your work. the prob­lem i have is when i enable the cus­tom CSS the cal­en­dar I loose all data of the cal­en­dar and instead it loads a generic google cal­en­dar.
    the src=“MyGoogleCal4.php?http://www.google.com/calendar/hosted/thejourneynh.com/embed?src=thejourneynh.com_oih7ku8bgsahoh4bj2d459o93k%40group.calendar.google.com

    Link to the page:
    http://www.thejourneynh.com/component/option,com_gcalendar/Itemid,68/

    the strange part is if I use the google cus­tomizer to change what is dis­played it seems to work but the cus­tom CSS is not changed:

    src=“MyGoogleCal4.php?https://www.google.com/calendar/hosted/thejourneynh.com/embed?showTitle=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23cc9933&src=thejourneynh.com_oih7ku8bgsahoh4bj2d459o93k%40group.calendar.google.com&color=%23865A5A

    Link to the new one
    http://www.thejourneynh.com/component/option,com_gcalendar/Itemid,70/

    any help on why one works and the other doesn’t would be greatly appreciated.

  125. Rod said on June 22nd, 2009 at 12:15 pm:

    Fig­ured out that it is remov­ing the first vari­able after the ? so I put dummy=0 in and it works fine now. Might be a bug.

  126. Rod said on June 22nd, 2009 at 12:18 pm:

    Nav but­ton images have dis­ap­peared. any ideas?

  127. Brian said on June 23rd, 2009 at 4:52 pm:

    @everyone

    Here’s the quick fix. Com­ment out lines 108 and 136. This will pre­vent the jQuery code from run­ning which seems to be inter­fer­ing with the nav but­tons. (Agenda mode seems unaf­fected.) I’ll let you know when I can rework jQuery (or an alter­na­tive frame­work) back into it.

  128. Brian said on June 23rd, 2009 at 10:47 pm:

    I replaced jQuery with Dojo. Full func­tion­al­ity restored. Please report any bugs.

  129. Alex said on June 24th, 2009 at 1:11 am:

    Surely works indeed. I down­loaded the lat­est Js and I’m just stick­ing with that. I also com­mented out lines 123–126 to fix the bub­ble issue. Every­thing seems to work well now :) Thank you.

  130. delrey28 said on June 28th, 2009 at 5:14 pm:

    I’m expe­ri­enc­ing the same issues noted above; but­tons are hosed and also I have no con­trol over the nav but­tons (which are blank). I’m using the lat­est script which injects Dojo, but I’m still expe­ri­enc­ing the same issues. I’ve tried com­ment­ing out 123–126 per Alex’s com­ment above, but to no avail.

    Let me know if this is me or if there are still issues per­haps with Dojo. Thanks in advance.

  131. Brian said on June 28th, 2009 at 9:58 pm:

    If the event bub­ble isn’t dis­played cor­rectly, the most likely cause is your CSS file is old. Make sure you use the lat­est. Keep in mind that if the Dojo code is active, you’ll need to add a width prop­erty to the .bub­ble style.

  132. Pavel said on July 14th, 2009 at 2:25 pm:

    Hello Brian, fist i wanted to thank you for this won­der­ful script. 2 days of search­ing try­ing and mod­ding and i came across your cal­en­dar script which solved almost all my prob­lems. The main thing i wanted it to be transparent.

    Every­thing is cool in Fire­fox. But in IE the cal­en­dars body tag still has bgcolor=#fff
    Can i some­how get rid of bgcolor? Demo: http://bikeworld.com.ua/kievmoto.php

    Regards,
    Pavel

  133. Brian said on July 14th, 2009 at 8:22 pm:

    @Pavel

    You need to set allowtransparency=“true” in the iframe IIRC.

  134. Brian said on July 14th, 2009 at 8:24 pm:

    Com­ments are closed for this post. If you have a com­ment or ques­tion, please go to the ded­i­cated site RESTYLEgc. You can click on Resources which has links to the dis­cus­sion group, wiki, etc. You can also request paid sup­port if you’re still stuck.

Subscribe to this post/thread