Restyle Google Calendar 2
Posted October 14th, 2007 in ProgrammingTags: CSS, Google, Hacking, JavaScript, PHP, Programming
The long awaited new version of MyGoogleCal is here. It supports the new AJAX-enabled Javascript method Google switched to last month. As a bonus, the new version has native support for multiple calendars each with their own colors! Other changes to the code include officially switching from fopen to curl to retrieve the data. Furthermore, the code replaces much less HTML since it’s encapsulated in Javascript. Without further ado…
UPDATE: MyGoogleCal now has a third version.
Download: mygooglecal2.zip. Contains MyGoogleCal2.php, mygooglecal2.css, MyGoogleCal2js.php, and an .htaccess file. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.
<?php
/*******************************************************************************
* FILE: MyGoogleCal2.php
*
* DESCRIPTION:
* This script is an intermediary between an iframe and Google Calendar that
* allows you to override the default style.
*
* USAGE:
* <iframe src="MyGoogleCal2.php?src=user%40domain.tld"></iframe>
*
* where user@domain.tld is a valid Google Calendar account.
*
* VALID QUERY STRING PARAMETERS:
* title: any valid url encoded string
* if not present, takes title from first src
* showTitle: 0 or 1 (default)
* showNav: 0 or 1 (default)
* showDate: 0 or 1 (default)
* showTabs: 0 or 1 (default)
* showCalendars: 0 or 1 (default)
* mode: WEEK, MONTH (default), AGENDA
* height: a positive integer (should be same height as iframe)
* wkst: 1 (Sun; default), 2 (Mon), or 7 (Sat)
* hl: en, zh_TW, zh_CN, da, nl, en_GB, fi, fr, de, it, ja, ko,
* no, pl, pt_BR, ru, es, sv, tr
* if not present, takes language from first src
* bgcolor: url encoded hex color value, #FFFFFF (default)
* src: url encoded Google Calendar account (required)
* color: url encoded hex color value
* must immediately follow src
*
* The query string can contain multiple src/color pairs. It's recommended
* to have these pairs of query string parameters at the end of the query
* string.
*
* HISTORY:
* 22 March 2008 - Replaced the custom javascript with a PHP script that
* uses the same technique as MyGoogleCal.php
* 14 March 2008 - Update to match Google changes to javascript code
* 14 January 2008 - Fixed Add to Calendar URL to point to Google
* 3 January 2008 - Reverted back to customized javascript code to fix
* bug where no data is displayed when navigating
* into future or past
* Note: imported calendars (e.g. iCal) should work again
* 29 October 2007 - Update to match Google changes to javascript code
* Note: imported calendars (e.g. iCal) do not work
* 14 October 2007 - Original release
*
* copyright (c) by Brian Gibson
* email: bwg1974 yahoo com
******************************************************************************/
/* URL for overriding stylesheet
* The best way to create this stylesheet is to
* 1) Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
* browser,
* 2) View the source (e.g., View->Page Source in Firefox),
* 3) Copy the relative URL of the stylesheet (i.e., the href value of the
* <link> tag),
* 4) Load the stylesheet in the browser by pasting the stylesheet URL into
* the address bar so that it reads similar to:
* "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
* 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
* Edit this new file to change the style of the calendar.
*
* As an alternative method, take the URL you copied in Step 3, and paste it
* in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
* That site will automatically format the CSS so that's more easily editable.
*/
$stylesheet = 'mygooglecal2.css';
/*******************************************************************************
* DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
******************************************************************************/
// URL for the calendar
$url = "";
if(count($_GET) > 0) {
$url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}
// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);
// Point stylesheet and javascript to custom versions
$pattern = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);
$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal2js.php?$1"';
$buffer = preg_replace($pattern, $replacement, $buffer);
// display the calendar
print $buffer;
?>
Use is similar to the original MyGoogleCal.php. To help create the <iframe>, you can use the Embeddable Calendar Helper. Just remember to update the src attribute to point to MyGoogleCal2.php and not http://www.google.com/calendar/embed.
In addition to a custom CSS file the script makes use of a custom Javascript file. Each URL is set after the script’s header and includes instructions on how to download versions of these files from Google. This is important since it appears that the Javascript file is localized. (I included copies that I downloaded in the above Zip file.)
Update (22 Mar 08): I created a new PHP file, MyGoogleCal2js.php, which downloads the JavaScript code and edits the code on-the-fly. This negates the need to maintain a customized version of the JavaScript code on the same server as the MyGoogleCal.php script. This should also lessen the chance that MyGoogleCal2.php will break when Google updates the code as long as the changes are minor.
The UI images are no longer contained in the CSS file. You have two options on how to handle this. If your site runs off of Apache, you can create a rewrite rule to hotlink to the Google images. (I included an .htaccess file in the Zip file above that has a sample rule.) The other, more conventional option is to create an “images” subfolder where the script is located and place copies of these images there. You will definitely have to do this if you want to replace those images with customized versions. (I included images in the Zip file.)
What I’m hung-up on right now is figuring out a way to not have to save and rewrite the Javascript file. The Javascript file is responsible for drawing the calendar, retrieving the XML data from Google, and then putting that data into the calendar. The _init() function dynamically creates the URL from which to retrieve the XML data by using the browser’s window.location.host property. Since the browser will presumably be pointing to your site, the host property will not be www.google.com. As a result, the Javascript hangs at the XML loading stage fails to retrieve data when navigating into the future or past. My attempts at circumventing this problem has been met with little success.
I tried the passthru directive in .htaccess file like so:
RewriteRule ^(calendar/feeds/.*)$ http://www.google.com/$1 [P]
The browser spits out a 502 error.
A redirect, [R] instead of [P], only works half-way. The XmlHttpRequest goes thru but the data is rejected because it’s considered insecure since you can’t load data retrieved from an external domain.
I also tried ProxyPass/ProxyPassReverse to map
/calendar/
to
http://www.google.com/calendar
but it simply results in an error. I’ll have to consult with my host to figure if the error is the configuration on their end or mine.
Update (03 Jan 08): After talking with my hosting provider it turns out this error is the fault of my virtual server and it won’t be fixed since they’re retiring the hardware. I’ve been placed in the queue to migrate my account over to a new (hopefully problem-free) server. In any case, I’ll definitely revisit this solution after the migration is over and test it then.
For more info, checkout: Fixing AJAX: XMLHttpRequest Considered Harmful or Use a Web Proxy for Cross-Domain XMLHttpRequest Calls. The last one has pretty pictures.
Failed experiments include:
-
Use the Javascript prototype mechanism to somehow override the window.location.host property to return a string of my choosing.
-
Rewrite a request to www.google.com to point to MyGoogleCal2.php so that I could inject code into the calendar page. I thought this had a lot promise up until the point I realized I couldn’t put an .htaccess file at google.com. This was one of those “Duh!” moments.
-
Manipulate the <iframe> DOM in order to change its document.styleSheets property directly. Due to security reasons, you can’t modify, let alone read, the DOM properties across different domains.
-
Proxy the XmlHttpRequest thru a curl script. This almost worked. The curl request succeeded in getting the JSON data, but for whatever reason, the Javascript code failed to do anything with it. Depending on the content-type requested for the response, either nothing happening or the browser would spit out a Javascript error. I’m sure it had to with an incomplete request header or returning just the response data instead of the entire response. But whatever reason it was, this solution seemed more trouble than it was worth.
Update (29 Oct 07): Google’s new version of the Javascript code does not require any customization. Do you suppose some Google developer read my post? 
However, a side-effect is that imported calendars do not work. I’m betting it has to do with XmlHttpRequest permissions, but I won’t know for certain without further investigation.
When you’re done restyling your calendar, show it off! Oh and don’t forget to Digg the article.
[…] UPDATE: New post on the new version of MyGoogleCal. […]
The “speech bubble” that pops up when you click on an event in the month view wasn’t working properly. The images needed aren’t in the image folder you provided in the zip file. I got it to work by adding the images to the folder. You can find the images at
http://www.google.com/calendar/images/close.gif
http://www.google.com/mapfiles/iw_tap.png
http://www.google.com/mapfiles/iw_sw.png
http://www.google.com/mapfiles/iw_se.png
http://www.google.com/mapfiles/iw_s.png
http://www.google.com/mapfiles/iw_w.png
http://www.google.com/mapfiles/iw_nw.png
http://www.google.com/mapfiles/iw_n.png
http://www.google.com/mapfiles/iw_e.png
http://www.google.com/mapfiles/iw_ne.png
These are also referenced in the .js file but are missing:
http://www.google.com/calendar/images/icon_moreleft.gif
http://www.google.com/calendar/images/icon_moreright.gif
http://www.google.com/calendar/images/transparent_sm.gif
Not sure when those are needed but might as well be thorough
Thanks for the heads-up Eric. I updated the zip file to include the additional images (including the seemingly unused ones).
Thank you for the restyled version of google calendar. It has enhanced our usage greatly.
However, we would like to ask a technical question which may seem trivial but is outside our capabilities, and any sort of help or instruction will be greatly appreciated.
We are working on auto-inserting the organizer’s identity for any event hosted by the calendar owner, and up till now, this problem cannot be resolved. We have to manually type in the organizer each time we put up an event.
Thank you so much for your attention and we look forward to hear responses from you.
Yu-Tuan,
You’re welcome. Upon my initial investigations of your problem, it turns out Google Calendar already keeps track of the account that creates an event. This can be verified by viewing the XML feed of a calendar. Another verification is to go to the Google Calendar site, subscribing to a calendar that is not your own, and clicking on an event that you did not create; you will see a data field called “Creator.”
Now even though Google includes the author information for each event, they chose not to display this data for the embedded version of the calendar. Adding this functionality to the custom Javascript appears to be straightforward but far from trivial because the code is obfuscated as result of the data compression techniques applied. I’ll look into adding this feature to the custom Javascript since it appears to be useful, but I can’t guarantee that I’ll be successful.
hi,
thanks for your efforts, but i don’t get it to work.
i want to adjust the colors of this calendar:
http://patsplanet.com/coloradio/index.html
but following your instructions here:
http://patsplanet.com/coloradio/index2.php
i don’t get any result. the stylesheet i want to use is this
http://patsplanet.com/coloradio/coloradio.css
the upper window is just one calender, but in the end i need to integrate 4 calendars like in the index.html this is the second box on the page). please have a look at the source of index2.php
another question:
is it possible to have all events displayed in open state, as if you have clicked on the title of the event? maybe with adjusting the javascript?
PAT
My calendar seems to be broken, not sure why. Also seem that google has changed their layout for calendar details… Any ideas?
Pat, Eric, and everyone else having problems,
Please give the new version a try. The old stylesheet should still work fine, but I included an updated version in the .zip just in case.
Brian, THANK YOU!
I will get to work on this new version this weekend and keep you posted on my results.
Again, my sincerest thanks!
Just noticed the note to the 10/29 update about ical fed calenders not working. That’s probably what broke my calender. Any more info on this? Ie, if it will be available in the future or is it possible through some other method now?
Thanks man, everyone was telling me that my calendar disappeared… I knew you’d have an answer. Thanks again for all your hard work.
Brian, love MyGoogleCal2!!!
For some reason my add calendar button (calendar_plus_en.gif) doesn’t work. Any ideas.
Nate,
Do all the other images appear? If so, it may just be a browser caching problem. If you test using IE, it should show the broken image icon. Right-click it and view the image by itself. If it appears, then go back to the page with the calendar and see if the image appears there. Refresh as needed. If it still does not appear, make sure the file exists in your “images” subfolder.
Hey Brian, the idea of restyling google cal is great, but I have been having trouble getting it to work!
For some reason only the events in the current month (and the couple of days before/after it) are visible. All the others cannot be seen — they are just not listed!
I’ve looked at a few other sites that use your script and that doesn’t seem to happen for them!
Any ideas/tips?
Thanks!
Brian,
Yes, all other images appear. I deleted my cache and images are in the proper “images” subfolder.
The problem seems to be the link on that image. When you click the add Google calendar button (calendar_plus_en.gif) the url is:
http://“mylocalhost”/calendar/render?cid=http%3A%2F%2F“mylocalhost”%2F…
When it should be:
http://www.google.com/calendar/render?cid=http%3A%2F%2Fwww.google.com%2F…
Not sure how this is happening. I really appreciate your help.
I’m sorry Nate. I misunderstood your question. It turns out you found a bug. In any case, I think I fixed it. What’s happening is that Google’s Javascript code is using your domain for the base of its URL. To fix this, your server needs to support mod_rewrite. We need to rewrite all requests to http://www.yoursite.tld/calendar/render to http://www.google.com/calendar/render. The following mod_rewrite rule accomplishes this:
RewriteCond %{QUERY_STRING} cid=http\%3A\%2F\%2Fwww.yoursite.tld(.*?)$
RewriteRule ^calendar/render$ http://www.google.com/calendar/render?cid=http\%3A\%2F\%2Fwww.google.com%1 [R,NE,NC]
The first line isolates the part of the query string we want to keep. The second line redirects the site visitor to Google while fixing the query string. This rule only supports a single embedded calendar. Download the latest .zip file and see the comments in the .htaccess file if you need to support more than one embedded calendar.
Brian,
Nice! The rewrite via .htaccess works like a charm.
Cheers!
Does this work with shared group calendars? I can’t seem to get any events to appear when using a group calendar editable by more than one user. (calendar url being XXXXX@groups.calendar.google.com
Hi Brian,
I’ve been trying for two days to get this to work and can’t get it right.
My php code is on this screenshot
http://www.winefinders-usa.com/screenshot.htm
The page I’m trying to load the calendar into is
http://www.winefinders-usa.com/calendarcodetest.htm
All of the files, including the .htaccess and php are loaded into a
http://www.winefinders-usa.com/calendar
Here is the code from my .htaccess as well.
RewriteCond %{QUERY_STRING} cid=http\%3A\%2F\%2Fwww.winefinders-usa.com(.*?)$
RewriteRule ^calendar/render$ http://www.google.com/calendar/render?cid=http\%3A\%2F\%2Fwww.google.com%1 [R,NE,NC]
Anything you can offer would be extremely appreciated.
Thanks,
Ralph
Hey Ralph,
You should restore MyGoogleCal2.php back to its original code. You shouldn’t have to touch the code except to change the $stylesheet variable. You supply the src value via the query string of the URL.
Also for the time being, don’t use the .htaccess file. It’s used to fix the calendar subscription button. MyGoogleCal2.php will function without it. I don’t expect the rewrite rule to be the source, but the only way to know is to take it out of the equation. Once the calendar loads you can put the .htaccess file back.
Last, you should set some attributes for your <iframe> like style=“border-width:0″ width=“800” height=“600” frameborder=“0” scrolling=“no”. For testing purposes, you don’t even need the iframe; you can just load MyGoogleCal2.php directly in the browser.
You might also want to strategically place some print statements to determine that all the code is being executed.
Thanks, Brian.
So I’ve restored the original MyGoogleCal2.php script, deleted and changed nothing but the $stylesheet variable to the following url:
http://www.winefinders-usa.com/calendar/mygooglecal2.css
My Iframe code is now:
My Query String is :
// URL for the calendar
$url = “”;
if(count($_GET) > 0) {
$url = “http://www.google.com/calendar/embed?” . $_SERVER[’QUERY_STRING’];;
My full php code is here:
http://www.winefinders-usa.com/calendar/sample.htm
I still don’t get anything but a blank page that’s here:
http://www.winefinders-usa.com/calendar/calendarcodetest.htm
What am I doing wrong? Sorry, I’m new to php.
Thanks,
Ralph
Ralph,
Is your PHP installation working? To check, create a PHP file with the following code and access that page. It should dump lots of information regarding your installation, like version number, modules that are loaded, etc.
< ?php phpinfo(); ?>
P.S. The IFRAME in your calendarcodetest.htm has a missing quote for the src attribute, but that still won’t fix the blank-page problem you’re experiencing.
P.P.S. I can load your calendar with MyGoogleCal2.php on my site, but it says “Events from one or more calendars could not be shown here because you do not have the permission to view them.” Make sure your calendar is a public calendar.
Hey Brian,
Thanks for figuring this out. I have been working with your script and things are close to perfect. I am building/testing the site on MAMP for Mac OS X. Since it is still all local I can’t provide links.
My problem is that the calendars won’t show events past a certain point from the current date (about a month) . It just looks like the events don’t exist, but when you view the calendar through Google they are there. I can’t figure out why. Is anyone else experiencing this? Could the local server cause a problem?
I would really appreciate some help from you or your readers.
Thanks again,
Riley
Happy New Year Riley and everyone else!
It’s always great to start the new year with a new bug. I kid. My initial investigation shows that the XmlHttpRequest problem that plagued my original version of this script did not completely disappear.
What’s happening is that when the Google Calendar is first requested, it already has the data for the current month. This is all fine and good if all you care about is the current month. However if you use the navigation buttons/links on the month/agenda, the Javascript makes an asynchronous request to get the data. (FYI this is AJAX in action.) The reason this breaks is because the requested URL is dynamically created using your domain name instead of google.com resulting in a silent 404 error.
The first version of this script replaces Google’s Javascript code with a modified version. It looks like I may have to revert the code back so it does this again. More details about the problem and solution is listed above in the striked-out text.
Since I’ve not thought about this problem in a while, I’ve come up with a couple of new approaches with which I want to experiment. Stay tuned.
Meanwhile, you may want to set the showTabs, showDate, and showNav query string variables to 0.
Happy New Year to you Brian!
Thanks for the lightning-fast update. I hope all of my requests get such a quick reply this year.
Setting the show___ variables to 0 should work for me for the time being. But it is a bit of a bummer once it gets later in the month.
I tried to look at Google’s javascript file (I pulled it in the same fashion as the css file) and it is pretty outta my league. I might still try and mess with it though, I’ll post if I get anywhere.
I’ll be staying tuned (if you fix it and want shoot me an email that would be totally awesome).
TIP: for those of you wading through the css file, try Firebug. It’s a Firefox extension that displays which css properties control which elements. It helped me immensely.
Thanks,
–Riley
Alrighty, I’ve reverted the code back to the original (Oct 14) method. This should have the side effect of being compatible with iCal calendars again. The customized Javascript file is newer, included in the Zip for convenience. The .htaccess and MyGoogleCal2.php have also been updated.
Hi Brian,
The concept of your code is great. I have some problems implementing it though. With the old MyGoogleCal.php i got the problem that the stylesheet is not implemented. With version number two i get a blank page.
I just changed the location of the css with my own one and use the correct query string.
The code is implemented here: http://www.cumgrano.nl/calendar.html
And the MyGoogleCal2.php looks like this: http://www.cumgrano.nl/MyGoogleCal2.txt
Do you have any ideas on what I’m doing wrong?
Hey Martin,
Make sure your PHP installation is working correctly. See comment #22. Your web server also needs to support curl via PHP. You should confirm this with your ISP.
You know, I just added a phpinfo.php file to the zip.
[…] you restyle your embedded Google Calendar using MyGoogleCal? Maybe you’ve restyled Google Calendar Gadget by following my instructions to modify the XML […]
Hi Brian,
You where right, it was the Curl. Unfortunately my host wont be upgrading anytime soon. So have to find another solution for this. Thanks for your help and the script!
Thanks so much for putting together all this great information and code on restyling the Google Calendar — super helpful!
I seeing two oddities though and hoping someone has a suggestion…
1) When you click on a calendar event and the bubble pops up with more detailed information about the event, the ‘Add to Calendar’ link points to http://www.mysite.com/calendar/event?action=.… instead of pointing to http://www.google.com/calendar/event?action=.…
2) On the month view, the drop down arrow only displays on a mouse movement on top of it. If you just hover the cursor on top of the arrow, it disappears. So it looks like it is flashing rapidly when you move the arrow over it. It’s like a mouse move event is triggering the right style and then all of a sudden it jumps back to the pre-mouse over state. I’d be happy with figuring the right style to set display:none and get rid of it all together too.
Both of these have happened before I’ve modified any of the style sheet tags.
I would also be interested in seeing the ‘Add to Calendar’ bug fixed.
Sure thing. I’ll have a look tonight after work.
OK the bug should be fixed. The zip file has been updated with a newer .php and .js file. The PHP file has directions on what needs to be changed in the .js file in case you need download it again. In short, this is the change:
f.put(“baseUrl”,c);
to
f.put(“baseUrl”,“http://www.google.com”);
Hey Brian,
I’ve got a simple problem but my troubleshooting has not yielded any successful results. I’ve got a few images not showing up on the calendar, which you can view at the bottom of this screen http://www.winefinders-usa.com/Wines/France/colonial.html. I’m betting it’s the effect of an incorrect imagepath variable someplace but I can’t seem to find in any of the code where the js looks for the images in. Can you help?
1. I’ve got one set of the images in root
2. I’ve got one set in root/images
3. I’ve got one set in root/calendar/images
4. I’ve got one set in the folder where the html page resides as well
Still, nada. Anything you can offer would be appreciated.
Thanks,
Ralph
Looking at the image properties of each image (they’re easier to see in IE), the images should be in root/images. You may need to clear your cache and refresh the browser to make the images appear. If you right click a missing image, you can always select View Image in Firefox and it will load just that image. That way when you hit refresh, you bypass the page cache.
Hi and thanks for the code — it’s awesome!
I’m not very versed in js or PHP and I’m honestly just not sure how to pass the parameters I want, like showtab=0, etc. I just want the month to show and not the week or agenda.
It’s pretty easy. Your basic iframe will look like this:
<iframe src=“MyGoogleCal2.php?src=user%40domain.tld”></iframe>
To turn off the tabs change it to this
<iframe src=“MyGoogleCal2.php?showTabs=0&src=user%40domain.tld”></iframe>
THAT did it!!! Thank you very much. I was trying to put them into the PHP then I saw a posting from you that said not to mess with the PHP.
One more question.
The only color I haven’t been able to change was the grid for the calendar month view. It still shows up as a light blue. Do you know where the property is for these lines?
Thanks again!
I actually solved my own problem and got the gridline color changed. Evertyhing looks good now except the actual even as it shows on the calendar. The event title has only the first few characters showing. Can I have some kind of word-wrap??
Bobby,
I’m guessing the calendar isn’t wide enough to show the name of a single-day event. If that’s the case, increase the width of the iframe by setting it’s width attribute and optionally the height attribute. The Google Calendar should stretch to automatically fill the whole iframe.
Hi! First of all! Great job!
All works fine for me, BUT: I´ve got a problem with the query string.
I get my calendar in english but I try to get it in german. So I added
hl=de& to the string. Now it looks like:
<iframe src=“G_CalenderTTV.php?title=Termine%20TTV%20Reicheneck&height=500&wkst=2&bgcolor=%23ffffff&hl=de&src=13a90kbah1enp…
Whats wrong?
PS: look at http://www.ttv-reicheneck.de/home/kalender.php
THANKS!
Mattes,
There’s nothing wrong with the query string. The query string attribute “hl” determines which Javascript file to download. Unfortunately, I reverted the code back to the old style of using a customized Javascript file in order to fix other major problems. As a consequence, the “hl” variable is more or less ignored, because the localized Javascript file specified by the “hl” variable is overwritten by the custom version stored on your web server, namely mygooglecal.js which was included in the ZIP file.
So in order to get a localized version of the calendar UI, you have to first download the localized Javascript file. The exact procedure is described in the comments. The only change you need to make is to add “hl=de&” to the query string in step 1. Then make the edits to the Javascript file as described in the comments.
Ive been having trouble. the site im trying to implement is http://www.ggchigamma.org/events.html. I get nothing on the page. just blank. but the same code on my test site http://www.hytechsupport.com/gamma/events.html seems to work fine. what am i doing wrong? I guess one of the servers are configured differently than the other.
mhyder,
It looks like you fixed the problem on your own, though you have not yet customized the stylesheet. If the calendar is blank, that usually means it’s a PHP configuration error, typically the curl module is missing.
IE7 and the datepicker problems.
using IE7 on Vista: When I hover over the month/year in the top navigation, all info in the calendar dissappears! I’ve looked at several sites implement MyGoogleCal2 and they all seem to have the same bug.
Thanks Jon, for finding that bug. Unfortunately, I don’t have Vista. (I don’t plan to either anytime soon—Macbook, Dell m1330 w/Ubuntu or similar laptop is more likely in my future.) So, I can’t confirm if the bug is fixed or not, but I’m very confident the bug is because of a missing image, namely:
http://www.google.com/calendar/images/menu_arrow_hover.gif
Throw that in your MyGoogleCal2 images folder and you should be good to go. I’ve already updated the .zip file.
How can i check if my server supports curl? thanks
The .zip file contains a file called phpinfo.php. Simply put that file on your web server and load that file in your browser. It should list the modules installed.
IE7 and the datepicker problem — SOLVED!
Brian, I’d already tried the ‘menu_arrow_hover.gif’ idea — didn’t work!
Google have updated their CSS — this seems to solve the problem.
I’ve also managed to get event titles to wrap Ref Bobby’s post(40).(tested with Firefox 2.0.0.12 & IE7 on Vista):
Solution:
1. Get Google’s latest CSS
2. find .monthview .event and remove “whitespace:no-wrap;“
3. find .IE7 .monthview .alldayevent and change “height:1.4em” to
“min-height:1.4em”
continued from previous post because I forgot to add this:
4. at the bottom of the CSS file add:
.monthview .alldayleftside .eventtitle {white-space:nowrap}
.monthview .alldayrightside .eventtitle {white-space:normal !important}
I’ve looked through both posts and all the comments, but I don’t see anywhere that tells specifically which property in the css to update to change the nasty blue grid color. If I just knew the hex value for that color that would be enough to find and change it. I’ve changed all kinds of hex values in the css file and it has had zero effect on the calendar so I’m not even sure what it’s doing.
Thomas,
I recommend installing the Firebug extension for Firefox and make use of its Inspect feature. It’s very handy in helping to identify elements on a page and what styles are applied to those elements. That said, some of the colors that the Google Calendar uses are: #c3d9ff, #bcd, #cde, #e8eef7, #e5ecf9, and #112abb. You can locate these in the .css file.
Great Script — I need to make this cal default to Agenda Mode. Have tried several times to no avail. can this be done?
Brad,
Are you unable to use “mode=AGENDA” in the query string? Like so…
MyGoogleCal2.php?src=user%40domain.tld&mode=AGENDA
There’s a list of query string parameters in the comment section of the script. You can use them to adjust the output of the calendar.
So I’m very very new to this but really need to change the colors on my google calendar. Is there any kind of step by step instructions on how to implement everything? Any help I could get would be amazing!!!
Thanks, it was the #112abb color that is the baby blue. Also, the css already has a background color for the Week/Month/Agenda tabs, but you can add a “color:#??????” to it to change the color of the text on those tabs. Just search for .view-tab-unselected and .view-tab-selected.
Just wanted to link people trying to customize their calendars to this:
http://mabblog.com/cssoptimizer/uncompress.html
Found from google for “uncompress css”
That script makes it a lot easier to read through all of the css from google.
I’m having trouble figuring out how to get the Print or Add Calendar buttons working. What was your solution to this?
Mike,
Google changed the Javascript code again. I’ve updated the included .js file inside the .zip file. I also added the icon_print.gif to the zip as well. I updated the PHP file but only in the comments section, in order to update the needed Javascript modifications. That should take care of your Print button.
As for the Add Calendar button, you need to use the .htaccess file. It contains a rewrite rule to handle this. See comment #16.
Thanks for the uncompress link. That’ll surely help the readers (and myself) immensely.
Hey Brian,
Just when I think everything is fine again, it looks like google changed things up again. SO i find myself here again. in firebug I am getting a JS error that says “window._init is not a function” you can see it here. This is the contents of my Iframe.
http://www.thedesigncoalition.com/blog/calendar/MyGoogleCal2.php/embed?showTitle=0&showNav=0&showDate=0&showTabs=0&showCalendars=0&height=200&wkst=1&bgcolor=%23000000&src=b51c84hj7tvb06sp55ps2o5e1o%40group.calendar.google.com&color=%23AB8B00
Any Ideas?
Hey Travis,
I suppose you missed my post, but I updated the .zip file last week. Try giving that a go. Also there’s a mistake in your iframe src attribute. You should remove the ‘/embed’ between ‘MyGoogleCal2.php’ and ‘?’.
Small bug fix. I updated the .htaccess file to fix many of the links like Print and Add to Calendar. I forgot to include this in the .zip file last week.
Brennan,
Sorry I’m a bit late in getting to your request, but if you haven’t noticed, there was a bunch changes I implemented, and I needed to finish that first. I wrote-up a set of step-by-step instructions in a new post. Hopefully, that’ll help you out.
Hi,
I have recently downloaded your excellent code to restyle my Google calendar and in Firefox everything is hunkydory except the issue of adding calendar’s which isn’t a big issue for me. However on vista/IE7 when I try to use the next or previous buttons to navigate through the months on the Google calendar it just hangs with the red loading.… image displayed. This is a real pain as like I said, Firefox is working perfectly, unfortunately my client and audience will no doubt be mainly using IE7. Is this a known issue to you? I would appreciate any suggestions you may have, to see my calendar navigate to the club events page on the nav menu. I know this is short notice but I am looking to deliver the calendar page on Sunday 6÷4÷08.
Thanks,
chris
Chris,
This is the first report I have regarding this error, but I did confirm it. I get a runtime error in IE7 on Windows XP. Works in Firefox and Opera.
Since you’re on such a tight deadline, a workaround is to add &showNav=0&showDate=0 to the query string to hide the navigation for changing the date. If you want to include the name of the month, you can use PHP to dynamically change the title query string variable. Meanwhile, I’ll investigate, but I can’t guarantee I’ll be able to do it by tomorrow. Once I fix the bug, you can re-enable those features for your client at a later date.
Thanks for the bug report and I’ll keep you posted.
P.S. The email you supplied bounced back, so hence the late reply in the comments section.
Sorry Brian,
I have updated my email address so it should be correct. I appreciate your effort.
Thanks
Chris
Brian,
Thanks for all the hard work on a great script! I just want to confirm that I have the same error as Chris where it just hangs in IE7 with the red Loading… box up. In firefox it works but nothing i do in IE gets past that. Also, I added the &showNav=0&showDate=0 to the query string but it did not help in IE. I’ll keep watching for any updates!
Thanks,
Karena
I have the same Loading hang issue when clicking the Agenda tab as well. I found the problem exists on IE6, IE7 and Safari. Works great on Firefox and Opera.
Does anyone know how to remove the Agenda tab?
This script is great, thanks!
All,
Finding time this week to work on the bug has been a bit tough. So all I can say is stay tuned.
Mike,
To hide all the tabs, set the query string variable showTabs=0. Hiding just the Agenda tab is a bit more complicated, and I have yet to try it. From a cursory look of the HTML using Firebug, the Agenda tab has no ID attribute for easy selection. The tab itself appears to be a <td> element. It is contained in a nested table inside a <td> tag with the ID, “calendarTabs1”. So if you can use the various CSS or DOM selectors (e.g. last-child) to isolate that
Brian,
Absolutely fantastic! Thanks for this wonderful script!
I am experiencing one strange problem. Namely, I’m trying to publish one of Google’s public calendars and it won’t show up. The only thing I can see is that their source address is a different format than any other I’ve seen. Here it is: src=p%23weather%40group.v.calendar.google.com . Any clues why this might not be working?
Best,
Steve
Are there step by step directions to edit and save files? I need to know where to put the files after I edit them. There seems to be no change after I edit the files or I get a blank page.
Tim
Tim,
Please see my post How To Install MyGoogleCal.php
Steve,
I was able to load the title of the calendar, but like you I saw no events. I would first check to see if the events are individually set to private.
I’m having the same issue as those above…in IE6 and IE7, I get hung up on “Loading” in the month navigation. Things are hunky-dory in Firefox and Safari. I have to be able to navigate since my client really doesn’t have many events in any given month! Any ideas on a fix for this yet?
Thanks for all the hard work!!!
Unfortunately it seems Google calendar broke something in the last few months — I get a “Loading” image where the calendar should be and it just hangs. I have no problem embedded my calendar without the script so it isn’t Google hanging.
In IE6.0 can you tell me how to get rid of the “Google Logo” and “Calendar Title?” They both show up above the calendar and are cutting off the bottom section of the calendar. I just need to remove them both. Is there a way?
Thanks.
Never mind, I was able to remove the “Google Logo” and “Title.” Saw it posted previously on this site, thanks.
My calendar is no longer showing up and just says “loading…” on my page (crossfadedbacon.com). It was working several days ago and as far as I know, I didn’t change anything on my end. Any advice?
–e
I had quite a bit of fun taking this quite a bit further. For a while now I had been intending to use google calendar (or some such ical tool) to help me with the annual family year calendar project (I prepopulate it with all sorts of dates and the ical tools allow one to overlay the calendars so nicely).
But google calendar did not offer quite enough customisation options. Then I found this post. thanks!!!.… and it gave me the idea and I got a bit carried away.…
Anyway if you have not yet done your christmas shopping and do have some of your photo’s that are halfway decent lying around, you could have a go at a flickr / google calendar mashup perhaps — using my script over at:
http://webdesign.anmari.com/gift-photo-calendar/