Restyle Google Calendar 4
Posted December 4th, 2008 in ProgrammingTags: CSS, Google, Hacking, JavaScript, PHP, Programming
As a few users of MyGoogleCal3 have already pointed out, the script no longer works properly. That’s the bad news. The good news is version 4 does work. In fact, with the latest changes Google made to their code, ALL the features that were broken in 3 appear to be working now—Agenda/Week view, the calendar navigation buttons, and IE is fixed. Please download and test out the latest version, and report any bugs in the comments and I’ll try to resolve them as time allows.
UPDATE (2009 July 5): MyGoogleCal is now RESTYLEgc.
UPDATE (2009 June 23): Google’s recent update broke the jQuery injection. In fact, the update is incompatible with injecting jQuery, Prototype, and MooTools. The only JavaScript framework that works is Dojo. I updated the code to inject that framework instead. For those people who value stability over having the latest and greatest features, I also added a comment to MyGoogleCal4js.php that explains how to freeze the calendar version. That should hopefully help all you fellow developers who tire of your clients calling you when their calendar breaks.
UPDATE (2009 May 3): MyGoogleCal4 now supports jQuery manipulation of the DOM. This gives the ability to apply styles after page load. As an example, the default code removes the inline style on the body tag allowing the stylesheet to set the background color. The default code also removes the width property from the inline style of the bubble class so that its width can be set in the stylesheet as well. This should help overcome many of the problems that can’t be solved directly using a stylesheet. You can thank TechTriad.com for funding this new feature.
Download: mygooglecal4.zip. Contains MyGoogleCal4.php, MyGoogleCal4js.php, mygooglecal4.css, and images. 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. phpinfo.php is used for diagnostic purposes to make sure your PHP installation is working and that it has the required plugins. In the archive folder, you can find previous versions 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 simple the fix is. No more XmlHttpRequest 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 installation of MyGoogleCal4 is the same as the installation for MyGoogleCal2 except you download the zip file above. You can ignore step 3 regarding the .htaccess file. As far as I can tell, it’s no longer needed.
Hi, thanks so much for this resource! I’m wondering… is it possible to get the gadget to display more than four calendars? (I’m planning to use this to track some gear that I rent.)
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 Calendar, not by this script.
i’m testing a calendar in a 300×300 iframe. when an event is clicked its content doesn’t fit in the iframe.
is there a way to either resize the event content to fit the iframe (300×300)
or
have event load in a popup or larger second iframe on the same page.
mark,
Most of the CSS for the event popup begin with “bubble”. However, the width appears to be hard-coded in the Javascript as an inline style. It is not immediately obvious where in the Javascript this width is set; though I did identify 4 places where 400 explicitly appears in the code, but that doesn’t guarantee that any of those values will affect the width. If any of those values do correspond to the width, then it’s just a matter of changing MyGoogleCal4js.php to change the value on-the-fly. Compared to that option, it would be much easier to adjust your design and increase the width of the iframe to 400 pixels.
I am having a couple of problems: The first is that the iframe loads this error message, “Fatal error: Call to undefined function 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 second is that I’m not able to look at the original CSS. According to the source code the file should be sitting at http://www.google.com/calendar/embed/92e1900d06b81f89c98e4647645bdab3embedcompiled.css, but I’m getting a 404. I’m mystified! Any help is greatly appreciated. Thanks.
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 information regarding your PHP installation including what plugins are installed. Look through the list of plugins and make sure the curl plugin is listed. If it’s not, have your web site administrator install the plugin.
2) The original CSS file is actually 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.
I’m loving the new set but was wondering if it was possible to get the Month label to display on the month view? It doesn’t matter so much on the agenda as it is displayed on each agenda item, and the week view has dates over each day, but without a month label over the month view the user is left guessing what they are looking all.
Thank you,
Greg
Greg,
Could you provide a screen shot? The month label (the tab in the upper right) should be visible, unless of course you set showTabs=0 in the query string.
Hey Brian,
Thank you for replying to my comment! Sorry, I probably shouldn’t have used the word “label”. I’m talking about the Month name (i.e. “December”) that used to cause problems with IE when moused over in MyGoogleCalendar2. I don’t need the calendar dropdown picker feature, I just need/want the name again. Here is a link to a screenshot of one of the calendars I currently 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 figure this out before spending a chunk of time reworking the style sheet.
Thank you very much,
Greg
OK Greg,
The screenshot definitely clears things up. That isn’t actually a label; that’s part of the navigation. I’ve confirmed that it works both in Firefox, IE, and Opera. When you click on it, you should get a mini-calendar display.
FYI you can’t use the stylesheet from version 2. Google changed and added some styles. I recommend first trying version 4 using the included stylesheet and make sure the calendar is working as expected. Then port your customizations from version 2 to 4.
I’m still a little confused. When I utilize your MyGoogleCalendar4 files without any modification this is what I get: http://cccomaha.org/uploads/calendarScreenshot2.jpg. I checked the site with firebug and it showed a with the “navSpacer” class applied to it but no actual content. You can see where I’m testing it out at http://www.cccomaha.org/calendarTest/index.php. I’m not getting a calendar name or dropdown. Could it be in the way I’m embedding it?
And thanks a ton, I really appreciate all that you’ve done with this workaround.
–Greg
Yep, in your query string you have showDate=0. Just remove that and you should be good to go.
Alright Brian, you are now my favorite blogger/developer of all time. You are da man! Thank you so much!
Sincerely,
Greg
Web Manager
Christ Community Church
So has anyone else had problems getting the content 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 content correctly on load but after that it is not able to dynamically load the content? Any thoughts?
Looks like Google changed their code again. Hopefully the fix won’t take long. I’ll keep you guys posted. Thanks for the headsup, Randy.
I updated the zip file. I made a change to line 30 of MyGoogleCal4js.php which fixes the problem. Instead of looking for ‘Ac’, the script will match any 2 letters. Please let me know if you guys run into any problems.
Thanks for this Brian — very helpful and it’s worked for me. (I haven’t managed to track down the element for the top of the ‘today’ cell in the monthly view, but apart from that it looks good.)
@padraig
You’re welcome. Firefox + Firebug plugin makes tracking down elements easy. The plugin also lets you edit the CSS on the fly so you can experiment before putting the code into the stylesheet.
I was tinkering myself with the compiled js of the new calendar until i found your preg_replace pattern. Works nicely, now you can actually read the ouput ; -) !
Greetings from .nl
Hi! This is a great! Thanks a lot!
But I have a small (I hope so) problem. When I embed standart google calendar with two calendars in it, it works fine, but when I change the src to mygooglecal4.php it shows only one of those calendars. Could you say what could be wrong?
Thank you!
Andzins
Hmm… I’m sory. I didn’t enything special, but it just works now!
I’m sorry!
Andzins
Hi Brian,
Great work! Everything works wonderfully, however ;), it seems to be ignoring the color in the query. I may be doing something wrong since I am not sharing my calendar, but using the private ticket, but all other variables work fine.
I have tried moving the color before the pvttk and after, moving scr and color to the end, nothing. Any thoughts?
Thanks,
Ken
I feel very lost because I did as you said to and the server does support curl, yet the calendar does not show up at all.
please help me
Thanks,
Sherrie
@Sherrie
For starters, you need to include the “src” query string parameter. See lines 9−−10 for basic usage. However, before embedding, test the calendar by accessing MyGoogleCal4.php directly by typing the URL:
http://uaf-web-test.freehostia.com/MyGoogleCal4.php?src=user%40domain.tld
assuming you saved the files to the root of your web site. Replace user%40domain.tld with your gmail account. The calendar should take up the entire browser window.
Hi Brian,
I was searching for ages on google to find some way of re-skinning the google calendar. Finally I found this, so thanks!
I am now trying to add the google calendar widget onto my homepage to show a summary list of events. However, I’m having the same issue with this — At the moment I have a horrible blue box on my generally brown website!
Have you any ideas/advice as to how I can re-skin this?
Thanks,
Lisa
Hi again,
My post above can be ignored now as I finally managed to find something that worked perfectly and enabled me complete control over the layout of the google Calendar widget.
So now I have both a google calendar page and also a google calendar widget on my homepage, which is exactly what I wanted! Not bad for a day’s work
If anyone is interested in the google calendar widget I used, it can be found here: http://ottodestruct.com/blog/2006/04/18/google-calendar-widget/
Thanks again,
Lisa
Glad to hear you worked things out, Lisa. For what it’s worth, you can read my post on the Google Calendar Gadget. It’s really not supported by Google anymore since you can achieve almost the same thing using the Google Calendar and adjusting the dimensions and turning on/off the various elements. To put the Google Calendar in your WordPress sidebar, you can just paste the HTML into the built-in Text Widget. This method works with all versions of WordPress.
Hi,
Sorry to ask a simple question: I need to increase the font size of the calendar but I can’t find the part of the css which will do that. Can you help?
Many thanks,
Chris
Hi,
I think solved my question. To increase the size of the text in the calendar you change the following section of code:
.calendar-container {
font-family:Arial, sans-serif;
font-size:small;
}
And make it font-size:medium
Chris
I’ve implemented this “hack” exactly as described, and it appears to be working great except for one small issue. Every once-in-awhile, the calender will display a message that says “this page has moved” with a new link included… When you click on the link, it takes you to the proper calendar, but the coloring is back to the original google colors, etc. The link appears to be generated by google — but I was wondering if anyone know whether this is a typical google issues or if it’s related to this re-styling script? Thanks!
I have not seen any issue of the kind, it sounds like it might be an error in implementing the script of the way that your google account is set up… Is it a public calendar, if not it might be authentication that is causing the error? I am not sure I haven’t tried this script in that way. Overall I haven’t had any issues with the code.
Hi, I’m back again with another question, sorry!
I was just wondering if there is a way that I can make the ‘agenda’ view display all of the events at once? …currently you have to keep clicking the ‘look for more’ link until events appear…
…or perhaps is there a way of showing by default, all events within the next year, instead of within the next month?
Thanks,
Lisa
Sorry Lisa,
I don’t know of a way to do it. I think Google defaults to the current month only.
Hi there, I’m looking at using this approach on the web site I’m working on.
I can’t figure out if there any way to make the actual calendars imported from Google match your own custom colours. I’ve tried to alter the color=%232900D3 sections of the embed code but that either made all the calendars the same colour (one of Google’s default calendar colours) or doesn’t display that calendar’s data at all. Is there a way to choose your own colours for the display of events?
Cheers,
Corry
Hi There,
Has anyone found the CSS attribute that controls the background color? The iframe code which embeds the calendar into the your web page seems to override any css I’ve found.
Any help would be much appreciated.
Cheers
Ben
@Corry
The color attribute in the URL will only change the color for events. It will not change the colors in the rest of the calendar. 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.
Thanks Brain,
Sorry, still a little confused — does that mean it’s only possible if you we’re to change the MyGoogleCal4js.php file or should I look for the inline style?
Thanks for you help!
Cheers
Ben
Well I’ve already found out the pattern to search for which is “#fff”, but it’s in two locations so I don’t know if one or both need to be replaced. Since this isn’t a pressing bug fix, I’ll probably look at it this weekend at the earliest. The change is rather simple if you want to do it yourself. 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 whatever color you want. The regex will be the “hard” part since you have to create a pattern to pick one of the instances if the other is used for something else. The other option would be to put the code block in MyGoogle4.php and replace the pattern ‘style=“background-color: #ffffff“‘ with an empty string, and then you can add a body style to your CSS.
Thanks Brian, but I realise I need to adjust the CSS to change the colours for the calendar surrounds! 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 definitely restricted to our events from different calendars only being rendered in the Google calendar event colours? Or is it possible and I am therefore making some mistake in adjusting the colour in the embed code?
Ah yes, it would appear Google limits you to 21 predefined colors. Furthermore, 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 pattern 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 number for the event starting with 1. This may be a little off but the regex should look something like /<div class=“st-evp.*?style=“background-color: (.*?);”/ and then the replacement will be whatever color you want. You’ll need to do another one for ‘style=“color: ‘.
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 encoding for events seemed to be done this way:
{“color”:”#1b887a“
Replacing with any other colour code only resulted in it changing to the colour of one of the other calendars or it stayed in its Google selected colour … so same result as fiddling with the embed code!
hey,
this script was sooooo useful. I’ve used it to prevent the google calendar from events automaticlly trailing of the end of the line
Thank you so much for posting this. The embedded calendar helper is a slick little tool but not being able to get at the code behind it presented a major problem to me. This helped me to get the embedded calendar to behave in exactly the way I wanted.
Does anyone here know of any PHP/Ajax/API solution that would overcome one of the main limitation of the Google calendar, namely that when one makes his/her calendar public with the “Share only my free/busy information (Hide details)” option, there seem to be no way for anyone else to see when the events end. That renders the whole option useless (what the point of making public the start but not the end of the time perdiods when one is busy ?!).
I was think of something like a script that would retrieve the full (private) info but would then blank the private details to display a publicly-shareable calendar.
This would be really helpful!
Thank you, thank you, thank you!! I have been banging my head trying to create this exact script for two days now, and I hadn’t even gotten into the customization parts. Version 4 works flawlessly. I will check back soon with an example of a pretty customized calendar
http://www.chrissarbora.com/schedule/
Here’s a pretty customized example of how I used your code to embed a customized calendar. I ended up changing the CSS file to be a PHP script as well, so that I could use variables for the colors — this allowed me to quickly change whole sets of colors. I will eventually replace the images as well. Thank you again!
I have implemented 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 document has moved here.
“
Any idea how to fix this so it doesn’t happen?
Thanks!
This is neat…going back to the bubble issue, you said,
» Most of the CSS for the event popup begin with “bubble”. However, the width appears to be hard-coded in the Javascript as an inline style. It is not immediately obvious where in the Javascript this width is set; though I did identify 4 places where 400 explicitly appears in the code, but that doesn’t guarantee that any of those values will affect the width. If any of those values do correspond to the width, then it’s just a matter of changing MyGoogleCal4js.php to change the value on-the-fly. Compared to that option, it would be much easier to adjust your design and increase the width of the iframe to 400 pixels.«
Can you explain what you are talking about — hardcoded where? Is the file accessible? If the values where changed in MyGoogleCal4js.php, can you give a single value example of how and where that is done?
Thanks!
Is it possible to use this change a piece of code to hide certain event details. Ex: I don’t want to show the location of each event when I embed the calendar on my site. Are these details customizable?
@Michael
In line 97 of MyGoogleCal4.php, you can see where the script replaces the src of the javascript with MyGoogleCal4js.php with the original src as a parameter to MyGoogleCal4js.php. This allows MyGoogleCal4js.php to rewrite the original javascript file which you can download separately if you want. Just load your calendar in a browser without the script and view the source to find the URL. Anyway, with regards to the “bubble” example, you would want to add a pattern-replacement-buffer block to MyGoogleCal4js.php like so:
// Change width of “bubbles” in the javascript
$pattern = ‘/400/’;
$replacement = ‘200’;
$buffer = preg_replace($pattern, $replacement, $buffer);
That would change all instances of ‘400’ with ‘200’. I have to warn you though, Google’s code is obfuscated and I don’t recommend reading it unless you’re up for a challenge.
@Tom
A quick and dirty way would be to create a css style .event-where { display: none }. That should hide the location of the event. Unfortunately, it’ll leave the “Where” label behind. There’s no way to select that label using a CSS adjacent selector because the label comes before the .event-where element. Furthermore, there’s no way to select the parent using CSS either.
You potentially could use JavaScript (I recomment Prototype or JQuery) to select the element with the class .event-where, then select the parent, and finally apply a ‘display: none’ style to the parent when the document loads. However, you’d have to modify MyGoogleCal4.php to inject a script tag to load your javascript plus you have to hook into document.onload event without squashing Google Calendar.
I can not get the month pull down to work here.
http://www.sunsetbiblecamp.org/events1.htm
Found a work around for me for the above issue. The only thing that remains is the right hand side of the bubble when you click an event is missing the border.
I keep getting a “no input file specified” error.…. as the src i’ve entered my google cal account name… Any ideas?
@Eric
Yes, it would appear the calendar dropdown is non-functional. I recommend adding showDate=0 to your query string to suppress it’s appearance. Another option would be to hide just the arrow by adding a style to your CSS, #dateMenuArrow1 { display: none; }.
@Joshua
Most likely this is due to a PHP configuration problem. 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 configuration like version number and installed modules. If it doesn’t, you should consult with your system administrator.
Thank you I got it fixed by using the newest .css I may have found a work around to the temporarily moved problem as well. See my page at:
http://www.sunsetbiblecamp.org/events.htm
I’m getting a fatal error say function not known at the first curl function. I assumed this was a cause my php didnt have curl extension enabled but i enabled it and it’s still doing the same thing. Any hints on how to fix and or diagnose this?
@Joshua
This guy’s problem sounds similar to yours. A dependency was missing, 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
Hello, Could you give me & everyone an example of a query string. Also, is there a way to hide just the “week” tab?
Great job on the script!
If the language in my calendar settings on google.com are set to german, the script doesn’t work. Setting to US english fixes this. I thus assume it may not work with any other language. Maybe you have stated this somewhere and I’ve overlooked it. Anyhow, thanks for your work!!
I get an error on the above website? and a white screen?
Any one have any ideas?
thanks.
Hey i fixed the error.
Is it possible to show the calender in mini mode?
Also if there is an appointment on a day I would like to show that days heading in red ie cant book.
Thanks.
If you want a mini-mode, I recommend you check out Google Calendar Gadget
http://www.lindenlan.net/2007/06/18/restyle-google-calendar-gadget/
Hi,
I have a calendar set up with your excellent script and it displayed everything with no problem. I noticed today, however, the text of calendar entries is being displayed in the same colour as the background highlight (effectively making them invisible!). The text shows up if you highlight the entry and when you click it the entry still displays in the bubble — have Google changed something do you know?
Regards,
John
@John
I don’t know if Google changed anything. My recommendation is that you search in the included stylesheet for the style that controls the text color or create your own. Firebug’s Inspect feature will help you locate the DOM element quickly.
I can’t tell you how grateful I am. This is exactly what I need.
Everything is setup great but I can’t seem to get the icons to load e.g. printer, arrows etc.
Has anyone else had this problem?
@Travis
Make sure the image path is correct. There should be an “images” subfolder in the folder that contains MyGoogleCal4.php.
I can’t thank you enough, I owe you big time.
I’ll be sure you upload a link when I’m done playing around with it.
Thank you
The whole reason I am trying to use your script is because I could not get the month drop-down to display from the original google version of the embedded calendar. This was going to be my first step in restyling the calendar, but I cannot get that to show up at all. Can you please take a look at my calendar at http://www.pfnaz.org/calendar and let me know what I am missing? Thanks!
Contrary to the description, 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 description is a dark blue with black letters…
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 embeded calendar without the script…
http://www.nationalcapitalfarms.org/calendar_Default.html
Thanks for your help…
Hi. I am trying 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 trying is:
$pattern = ‘/style=\“color: rgb\(41, 82, 163\);\” class=\“ca-evp/’;
$replacement = ‘style=\“color: rgb(255, 255, 255);\” class=\“ca-evp’;
$buffer = preg_replace($pattern, $replacement, $buffer);
I have tested the pattern in a Regex program (RegExhibit for Mac) and confirmed that it should match what I want to change, but I still just get the default colours.
Can anyone provide further assistance? Thanks.
I was having the same problem where the right border of the bubbles wasn’t showing. The css code for the bubbles is missing in the MyGoogleCal4.css file. Simply look at the css from google and copy those missing bubble elements. Problem solved…
@Jason
That won’t work since the source is comprised primarily of <script> elements. All the HTML is dynamically generated from the Javascript after the PHP script is run.
@Brian
That’s what I started to think after I posted my comment, but was using one of your previous comments as a reference (#40 above).
In case then, I presume we are stuck with the default Google styling on all elements that use in-line styles?
@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 figure out where in that code it controls those colors.
I apologies if I am just missing something obvious, but I used your method to customize the calendar on http://www.checkersbistro.com . It works great except in IE, the same as others have reported, the event text changes to be the same color as the highlight. It works great on any browser but IE. Any Ideas?
Thanks for doing this it makes the page look so much better with a matching calendar!
@Jim
Can you provide a link to your work-in-progress? It’s better if I can see the problem first hand.
http://www.checkersbistro.com.index2.html
Thanks for your help!
Sorry, I mistyped the / http://www.checkersbistro.com/index2.html
@Jim Charles
Hey, how did you manage to change the color of the event listings 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.
Whoops, I forgot to add the link to my calendar as an example.
Here it is:
http://www.scottishtheatreforum.net/forum/index.php?action=eventCalendar
@Brian / @Jim Charles
Never mind Guys. I’m a muppet. You change the styling of these using the “color” parameter in the URL. Can’t believe I missed that. Altho you are limited as above to a set number of colurs. Sorry for wasting your time guys.
Hi I’m getting this error upon installation. Is this because I need to install Curl?
Fatal error: Call to undefined function curl_init() in /home/lincolns/public_html/mygooglecal/MyGoogleCal4.php on line 84
@Nick
Most likely. You can use the included phpinfo.php file to confirm if curl is installed or not.
Thanks Brian, how do I get this installed? Will it be down to my hosting provider? whoever manages the server?
@Nick
Yes, consult your sysadmin/hosting provider.
I have the same problem that Jim described above: “in IE, the event text changes to be the same color as the highlight. It works great on any browser but IE.” Any help would be greatly appreciated. Thanks a lot.
I am too having the problem with the week view. Events that are past a certain time cannot be seen since there are no scrollbars, and the whole page is one color.
The link in the previous mention of this problem shows the problem was fixed.
and i also noticed that the dropdown for the date picker doesnt seem to work.
To get the dates working again, follow the instructions in the php file to update your CSS. Google changed a few things around on us.
Anyway to avoid caching the calendar content?
I am still having the same problem that Jim described above: “in IE, the event text changes to be the same color as the highlight. It works great on any browser but IE.” Also, in IE only, the month advance arrows disappear.
Here is the url: http://www.northfieldschool.com/calendar.html. I really appreciate all of your work on mygooglecal. Thank you very much.
Hi,
I figured it out. Thanks again.
it does work, and i can see that others have figured out how to get the mini calendar to participate and the week view as well, but i am clueless on what that might be.
never mind, it suddenly participated .. maybe i needed to clear my cache.
Hello,
Restyle Google Calendar 4 is a great script. I saw him run on a website and I would use it too … but I can not. (GCalendar 2.0.1 / Joomla 1.5.10)
I want to use use the Custom CSS and your script for edition.
I have no problem to display the Google calendar on my Web site (currently on localhost) when Custom CSS is off, but when is On, the calendar is not displayed.
On the code page, MyGoogleCal4.php seems to be there but nothing is displayed.
Have you any idea to solve this problem and start mygooglecal4.css.
Thank you for your help
Pierre
Ok, I solved the problem simply by activating curl.
Pierre
First, awesome tool! Thanks for your work on it and sharing it with the world. Regarding the date dropdown issue, I’m not getting it to work either. My server is running PHP version 5.2.9 and I haven’t examined what plug ins are required. If it helps, here is the error I get when I click on the dropdown button:
Error: a.aa is not a function
Source File: http://www.cpcky.org/calendar/MyGoogleCal4js.php?418e9f0472d87c0bcaa3f1bde835d6f0embedcompiled__en.js
Line: 109
Might be an improperly parsed parameter?
Oh, here is the link to the calendar display:
http://www.cpcky.org/index.php?id=gmcalendar
Here is some info about cURL on my server:
cURL support enabled
cURL Information libcurl/7.19.4 OpenSSL/0.9.8i zlib/1.2.1.2 libidn/0.5.6
Seems that Google is on to you at this point. The examples above now have a graphic overlaying the bubbles… Why they won’t just add a reference for a custom css file is beyond me.
@Alan
Well Google Calendar (like many Google services) is still in “Beta”. No surprise. Just download the latest CSS file per instructions in the script comments, make your customizations, and you should be good to go.
Hi there Brian,
I’m using your hack to change the CSS of a google cal I’ve embeded on my WordPress.
The thing is taht something is messing up the futher info windows 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 anyways mate,
Tiago
Not sure what’s happening, but when I click on an event in the month view, I get a bizarre pop-up with multiple overlapping caption images (just the bottom of the caption bubble). Any body else encounter this?
@menosketiago and Phil
If you encounter visual or functional anomalies, especially after the calendar was working fine, that’s usually a sign that Google made an update. At which point, you should update your CSS file per the instructions 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 disclaimer that the CSS file may not be up-to-date and provide instructions in the comments on how to download the most recent version.
You did say that. I should have picked up on it. Thanks for being patient with the terminally slow.
Ups, then they made just after I’ve downloaded the css from their site LOL
Re-checking
Thanks
Yes, Google have done something a bit funny.
I was having problems with the further info dialog (loads of overlapping images), so I got the latest CSS, but the further info dialog now has the problem of being stretched vertically nearly the height of the calender; it’s width it’s way too short.
@Alex
In MyGoogleCal.php, remove or comment out the javascript where the width style is removed (lines 121–124). Alternatively, go into the CSS file and add/change the width property in the .bubble style.
Ah, as an addition to above, I’ve test this on OS X, the problem is when Safari, either 3 or 4, tries to view to further info window.
This problem doesn’t occur in Firefox. The problem also doesn’t occur when viewing a calendar at the normal google.com emed address (http://www.google.com/calendar/embed?src=email@address.tld) in Safari 3 or 4.
@Brian
Comment out the Js, worked a charm. Thanks very much!
Just found this site, it is amazing. 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.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
has anyone ran into this one yet? I also updated the .css and ran the phpinfo to make sure I have all the server requirements. Everything looked good.
@T
Make sure the src of the iframe is correct and that the file exists at that path location. If your iframe src equals “/mygooglecal4/mygooglecal4.php”, the leading slash means to start the path at the root of the website. If you’re trying to place the script file relative to the page that contains the iframe, you’ll need to remove the leading slash. Without seeing the actual site, I can only guess that’s the problem.
BTW I solved my last post, was a simple case issue. Sorry, I got a new issue though. Using Firefox/Firebug will help you find everything, except for the color of the title of the Calendar? Below is the style code I get from Firebug. I saw that Greg from post number 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 Calendar? Has anybody tried to change the color title, or no of a resource that describes the css? Here is what Firebug picks up when I inspect my Google Calendar Title.
element.style {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-weight:bold;
padding-left:2px;
}
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.
@T
Anything with element.style is an inline style. You’ll have to change or remove the style using the jQuery method for those specific styles. Since color does not appear to be set inline, you should be able to set it in the stylesheet.
@ Brian
Thanks again for the reply Brian. I looked in the documentation to try and understand 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 provide and extra detailed explanation for this, or point me to some reading materials?
Thanks Brian!
From today mygoogle cal. stoped working? I cannot list the months and the calendar is not reacting on mouse click.
Yesterday was everything ok. Its the problem on my side? Does it work for the others?
Thanks.
Yes, I get that problem too leslie. I haven’t checked my calendar every day, but I assume, as it’s the same problem, that it occured recently.
Yah I can confirm that problem. Was working on Friday June 12th. Now not responding to clicks in all browsers.
Found the following solution to the problem:
comment out lines 110 — 136 in the MyGoogleCal4.php file. That seems to fix the problems at the expense of not being able to control the bubble width and body style.
Yeah. I have the same problem. Nothing is reacting on mouse click. Anyone else? Is this just us three?
@Everyone
I’ll look into trying to solve the problem this weekend. I’ve been a little busy this week. Meanwhile, please follow Thomas’ lead above. That actually gives me a clue where to start.
Just a reminder, there is a “Hire Me” link at the top. Financial incentives are a good motivator as I’m sure most of you agree.
@Thomas
That didn’t work for me. The bubble 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 simply change the css for their calendar. Uugh!
I am using the joomla plugin gcalendar which is based off your work. the problem i have is when i enable the custom CSS the calendar I loose all data of the calendar and instead it loads a generic google calendar.
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 customizer to change what is displayed it seems to work but the custom 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.
Figured out that it is removing the first variable after the ? so I put dummy=0 in and it works fine now. Might be a bug.
Nav button images have disappeared. any ideas?
@everyone
Here’s the quick fix. Comment out lines 108 and 136. This will prevent the jQuery code from running which seems to be interfering with the nav buttons. (Agenda mode seems unaffected.) I’ll let you know when I can rework jQuery (or an alternative framework) back into it.
I replaced jQuery with Dojo. Full functionality restored. Please report any bugs.
Surely works indeed. I downloaded the latest Js and I’m just sticking with that. I also commented out lines 123–126 to fix the bubble issue. Everything seems to work well now
Thank you.
I’m experiencing the same issues noted above; buttons are hosed and also I have no control over the nav buttons (which are blank). I’m using the latest script which injects Dojo, but I’m still experiencing the same issues. I’ve tried commenting out 123–126 per Alex’s comment above, but to no avail.
Let me know if this is me or if there are still issues perhaps with Dojo. Thanks in advance.
If the event bubble isn’t displayed correctly, the most likely cause is your CSS file is old. Make sure you use the latest. Keep in mind that if the Dojo code is active, you’ll need to add a width property to the .bubble style.
Hello Brian, fist i wanted to thank you for this wonderful script. 2 days of searching trying and modding and i came across your calendar script which solved almost all my problems. The main thing i wanted it to be transparent.
Everything is cool in Firefox. But in IE the calendars body tag still has bgcolor=#fff
Can i somehow get rid of bgcolor? Demo: http://bikeworld.com.ua/kievmoto.php
Regards,
Pavel
@Pavel
You need to set allowtransparency=“true” in the iframe IIRC.
Comments are closed for this post. If you have a comment or question, please go to the dedicated site RESTYLEgc. You can click on Resources which has links to the discussion group, wiki, etc. You can also request paid support if you’re still stuck.