Restyle Google Calendar

Posted October 8th, 2006 in Programming
Tags: CSS, Google, Hacking, PHP, Programming

I had suggested that my company use Google Calendar to publish events. It’s easy, it can be made public and shareable, and it beats figuring out how to publish an Outlook/Exchange calendar on the web. (From what I’ve read about Google Calendar, you can publish multiple calendars individually controlling the level of privacy and publicity—ooo, maybe we can migrate away from Exchange…) Yet, the coolest part about Google Calendar is that you can embed it in your web page using an iframe which Google provides a handy-dandy configurator to generate the HTML. The worst part about Google Calendar is that you embed it in your web page using an iframe.

UPDATE: New post on the new version of MyGoogleCal.

UPDATE: Around September 7, 2007, Google rolled out a JavaScript version of the embedded calendar. See Comments #71 and #72 for a workaround.

UPDATE: New post on how to restyle Google Calendar Gadget.

An iframe is truly a page within a page from the start html tag down to the end html tag. Therefore it has it’s own separate scope which means you can’t inherit styles from the parent page. If my company’s web site had a cerulean blue theme, then I wouldn’t really care. Unfortunately, the web site is colored various shades of green. Clash-o-matic.

What’s the solution? Use an intermediary script to request the calendar document and then replace the stylesheet link with a link to my own stylesheet. Voila!

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

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

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

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

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

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

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

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

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

$pattern = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

If you already have an embedded calendar, just put this script on your web site and change the iframe src attribute to point to this file with the same query string and it should work. You will get an unstyled calendar. Download and save the stylesheet for your Google Calendar to your web site, update the $stylesheet variable, reload the page and your calendar is styled. Now edit the stylesheet to make it better integrated.

Questions, suggestions, bugs, etc. email or leave a comment.

How do I color-code events from different calendars? This is a work-in-progress. It’ll be done when it’s done. Tips (see link below) will encourage me to finish it faster. If you do leave a tip because you want this feature, please indicate that in the Item text field.
How do I download the stylesheet? See Comment #5.
How do I change the calendar images, for example, the buttons? See Comment #8.
How do I get mini-mode to work? You don’t. See my post on how to restyle Google Calendar Gadget.
No, I don’t like Google Calendar Gadget. I want to restyle the calendar in mini mode. See Comment #16.
My web host disabled fopen() or I think fopen() is not secure enough so I’d prefer curl(). See Comment #20.
How do I get rid of the Google logo? See Comment #24.
How do I get the event details to appear in a pop-up window? See Comment #27.
How do I change the background color? See Comment #64.
HELP! My calendar disappeared! All I can see is the title (and a JavaScript error)! What do I do? See Comments #71 and #72.

110 Responses to “Restyle Google Calendar”

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

Hi Brian,

this is exactly the suggestion I was making to the developers of the embeddable minimode calendar. Just one question. I followed all of your instructions but I am getting this error still.

Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘/’ in /home/thedesig/public_html/blog/calendar/MyGoogleCal.php on line 82

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

and all the other files are in the same directory “calendar”

does this line:
$replacement = ‘MyGoogleCal.php’;

need to be an absolute path? I tried it both ways and it didnt work so i know there is another problem but I was just curious.
Brian said on October 8th, 2006 at 7:15 pm:

That error means there was an unescaped slash character in a regular expression. This was caused by WordPress’ post editor.

The offending line was:

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

I’ve changed it to

$pattern = ‘/(http:\/\/www.google.com\/calendar\/embed)/’;
Travis Dahl said on October 10th, 2006 at 7:55 pm:

Great I got it working now.I want to be the first to know when you get it working with minimode. Keep up the great work
adam pope said on October 11th, 2006 at 12:27 am:

I’ve tried it, and checked out Travis’s efforts too, but my calendar doesn’t seem to want to load. Is this due to the php settings? Ought http://www.informationhandyman.com/MyGoogleCal.php come up with a page? Is there anything within the php file I need to change as some of the comments seem to suggest or should it just come up with an unstyled calendar? Thanks for your patience…
Brian said on October 11th, 2006 at 9:17 am:

Adam,

If you are not going to supply a query string like so:

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

Then you have to set the $url variable in the script to default to your calendar. See the script comment regarding $url for the proper format.

While you’re styling your calendar it helps to have both your Google calendar open in one tab/window and your MyGoogleCal open in another tab/window. You need the Google version open so that you can view the source and determine where to download the CSS file. It’ll look something like:

embed/20061006000432embedcompiled.css

That number is a time stamp and so it may be different for your calendar. To download the CSS file, just copy and paste the relative URL into your browser address field and add http://www.google.com/ to the front of it and hit enter. Then select File->Save. Rename the file, set the $stylesheet variable to point to it, and edit away.
Travis Dahl said on October 12th, 2006 at 9:58 am:

hey everybody,
I got my calendar styled and up on my site. check it out. http://www.thedesigncoalition.com/
bennie said on November 12th, 2006 at 9:37 am:

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

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

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

Thanks
Bennie
Brian said on November 13th, 2006 at 11:30 am:

Bennie,

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

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

You just need to comment these lines out or change $replacement to point to a folder where your images are stored. Then all you need to do is create the images and save them to that folder. If you use the comment method, the folder is an “images” subfolder of the folder that contains the PHP script. Of course you’ll have to use the same names Google uses, e.g. btn_prev.gif for the previous button.
Bennie said on November 17th, 2006 at 8:51 pm:

Thanks alot brian that really helped!!!

Now I have another question. This one is hard to explain

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

here is my script

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

Here is the page

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

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

Sorry about the long links.

But as you can see in the last link I have many srcs which combines the shared calendars into one huge shared calendar.

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

Thank you so much for your time
Bennie
Bennie said on November 18th, 2006 at 8:42 am:

Hi Brian,

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

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

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

Here is my calendar in month mode.
http://rlchome.org/googlecal/MyGoogleCal.php

Also Why does it sometimes render in military time. Do you have any idea why?

Thank you so much for your time
Bennie
Bennie said on November 18th, 2006 at 10:27 am:

Ok Never mind we don’t need people to skip to the next months on the agenda. So forget the last question.

But I do have a new question. Why are all the times for the month calendar 2 hours behind what it should be.

If you click the calendar link below it will go to the calendar but it displays the google stuff up top with the correct times but if you click next month all the times shift down by 2hrs. Do you have any ideas why.

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

here is the calendar.
http://rlchome.org/googlecal/MyGoogleCal.php

Thank you so much for your time
Bennie
Brian said on November 18th, 2006 at 10:57 pm:

Hey Bennie,

You’re welcome. This script is just my way of giving back to the Internet.

As for your questions, working backwards…
1. The two hour difference and times being displayed using military time format is because you are combining multiple calendars. Each calendar has a format and timezone setting, and apparently they don’t all share the same settings. The calendar that’s listed first is the one which sets the timezone and time format for the rest of the calendars.
2. The reason you can’t set the agenda mode is because you have the mode set to month in the $query variable at the very end. (You also have the chrome set, too.) When you tell Google Calendar to display both month and agenda, it must get confused and defaults to month, or it simply takes the first or the last value it reads. In any case, you really should not set the $query variable. You should leave that as an empty string because it’s meant to initialize the variable.
3. I know you want to combine multiple calendars, but it won’t work with the script as written. I didn’t account for this because when I originally wrote the script I wasn’t aware you could combine calendars by simply declaring multiple src’s. The problem is two-fold. 1) multiple query variables with the same name is bad. Query variables should be declared once and have comma-delimited values. This wouldn’t be Google’s first kludge. 2) Now when PHP reads in the query string to populate the $_GET variable, each src variable it sees is treated as a new one and therefore the last one read will overwrite the previous one. This is why only the last calendar listed was displayed when you first attempted this.
So to fix it, I rewrote the $query block to use the original query string supplied rather than rebuilding it. Makes the code block simpler.

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

Sorry it took so long to get back to you, but it’s been a busy week. Anyway, this should fix all your problems.
Bennie said on November 19th, 2006 at 2:01 pm:

Hi Brian,

The 2 hour difference thing fixed it. But everyonce in a while the military time pops up, but a refresh and it goes back.

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

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

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

Thanks so much
Bennie
Bennie said on November 19th, 2006 at 9:23 pm:

Nevermind it was some of the symbols got messed up when i copied and pasted from your page. But when I replaced those with the correct ones it works fine.

Thanks A Billion for your help. This is what we where looking for to the T.

If you ever figure out why military time pops up everyonce in a while. Let me know. We are using the same timezone for all the calendars and they are all set to non military time. So I don’t know if it is a rendering thing on googles side or what.

Thanks Again.
Bennie
Dusty said on November 20th, 2006 at 12:38 pm:

I found your very cool post on restyling the embedded google calendar and wanted to use it on my website. I’m trying to use it in MINI mode but have been unable to get it where I can style it. I don’t know much about PHP, but I’ve tried to follow your instructions. I’ve gotten past the point where I’ve downloaded the css for the google calendar, but I’m getting strange output once I put it all together. I just see the php code in the area that I defined for the calendar. Here’s my iframe line…

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

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

These are the only things I’ve changed besides pointing the $stylesheet in MyGoogleCal to mygooglecal.css locally. Any idea why I’m getting this result?

http://static.flickr.com/121/302122800_925d2523e9_o.jpg
Brian said on November 20th, 2006 at 11:06 pm:

If I had to guess, you’re getting that result because the script is being treated as text and rendered as tag soup rather than being processed as a PHP script. Make sure your PHP configuration is correctly setup on your server.

As for mini-mode, I do not officially support it as it’s still (as far as I know) an experimental feature, albeit a working one. From what I gather from the Google Calendar Help Group, the mini mode has some problems like only displays data that is shared to everyone, only displays in English, the selected date (and therefore the agenda) does not update when navigating month-to-month, etc.

That said, it doesn’t mean that mini mode can’t be styled. On the contrary it can. Mini mode uses a style block in the header rather than a linked stylesheet but the technique used in the script will work just the same. You simply have to create multiple $pattern-$replacement-$buffer blocks to edit the individual styles you want to change. Since you’ve admitted to not being a PHP expert I suggest enlisting a friend to help you out with this task. I should warn you, though, that people who’ve tried to use this script with mini mode have reported the agenda portion breaks.
Rex said on December 1st, 2006 at 11:03 pm:

Would you be able to post a cURL alternative to this script? My host (Dreamhost) has disabled “fopen” on all of the sites they host, so I get “file access is disabled in the server configuration” errors that appear to repeat infinitely. I’m in the process of moving my band’s online show calendar from onlinegigs.com (a pay site) to Google Calendars (free).

This is great that you’ve posted this information — I can’t wait to use it!

If you wanna see the horrible thing that happens when fopen is disabled:
http://phobophobe.com/calendar.html

Thanks!

- rex
Michael said on January 3rd, 2007 at 12:56 pm:

Like other posts here, I would like to say what a great idea this is. The problem I wold like to solve is being able to merge several google calendars into one display calendar embedded in my site. When you do that by adding src’s, all the calendar items display in the same color. Is it possible using the PHP script, to make each calendar display in a unique color?

On a seperate note: has any one tried using mini-mode to display a full year at a time? 12 seperate instances I mean …

Many thanks -
Michael
Brian said on January 3rd, 2007 at 7:31 pm:

Rex,

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

———————–

Michael,

I’m actually surprised Google overlooked color-coding combined calendars, especially since it’s one of the most requested features. I did some research over the holidays, and I got the impression this is technically feasible. The key is parsing the eid strings. Events from the same calendar share common characters in their eid strings. Usually it’s the last 30 characters but not always. It’s that inconsistency that may make it difficult to color-code events using the script, though probably not impossible.

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

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

Replace the 5 lines for “Request the calendar” with

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

Fixed bug in line 5. Was originally $buffer = curl_exec();. Credit goes to Yvette in comment #52.
I haven’t tested the above code, but it should work. I’m not all too familiar with cURL but based on the API docs and the tutorial that’s what you need. In a future version of the script, I’ll give the user the option to pick which method they want to use.
Michael said on January 4th, 2007 at 1:17 pm:

Thanks Brian — I see on the google groups that this issue is getting a lot of play; fingers crossed google will update calendar to make this the default behavior … until then will post here if I come up with a reliable regex for the eid parsing …

best wishes for your new year -
Michael
Michael said on January 4th, 2007 at 1:27 pm:

By the way,

I came across this:

http://30boxes.com/boxed

Another way to modify Google calendar feed(s) …
Stefanie said on January 8th, 2007 at 11:47 pm:

This is great…much appreciated. I’ve managed to change the colors to match my website scheme, but I can’t figure out how to get rid of the Google logo and calendar title. I know this is an option straight from Google’s configuration tool, but it didn’t carry over and I can’t figure out which code in the CSS will get rid of them.

Mahalo!
Stefanie
Brian said on January 9th, 2007 at 12:13 am:

He mea iki, Stefanie.

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

At a very minimum, your iframe code should look like

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

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

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

where the elipsis is the original code (which can be removed if you want, but its just as easy to leave it in in case you want to display the logo at a later time).

That should do it.
Stefanie said on January 11th, 2007 at 11:13 pm:

Works great! Mahalo again.
Sue said on January 12th, 2007 at 10:15 am:

Helping a friend with her website and this worked perfectly. Thanks for posting it!

Now if anyone knows how to get the event details links from an embedded calendar to open in a pop-up rather than new window, I’m all ears…
Brian said on January 12th, 2007 at 12:20 pm:

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

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

I left the ‘target=“_blank“‘ in the replacement in case the user turns off Javascript, so it’ll revert to the original behavior. You can change how the popup opens by adjusting the parameters for window.open (i.e., you can remove toolbars, control the size, make it modal, etc.)

The code is untested.
bullet proof hosting said on January 26th, 2007 at 2:14 pm:

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

[…] Link: LindenLan.net […]
Ian said on February 22nd, 2007 at 1:01 pm:

I’d love to convert my DotNetNuke calendar over to Google calendars. Unfortunately, DotNetNuke is not a PHP application. Has anyone converted this ability over to JavaScript or .Net code?
Brian said on February 22nd, 2007 at 1:53 pm:

There’s obviously some interest in the DNN forums regarding Google Calendar integration either directly or via iCal syndication. Unfortunately it’s not currently supported as far as I can tell.

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

If, however, you wanted to embed a Google Calendar, you would most likely just need to edit a template file if DNN is similar to other CMSes. Google Calendar isn’t dependent on PHP.

However, if you wanted to use my code to restyle an embedded Google Calendar on your page then you’d need to support PHP on your web server. Your site doesn’t necessarily have to run on PHP to use the code above. It just has to be able to serve a PHP page in addition to whatever other scripting language your site runs on whether it be ASP, ASP.NET, ColdFusion, PHP, or other.
Chris said on March 8th, 2007 at 10:40 am:

Hi Brian,
Great work here. Have you found out how to expand the Agenda view to show more than just one month’s worth of calendar entries? I’m interested in showing 3 months in the Agenda view, since the calendar in question will only have a couple of entries/month. Thanks so much for this. I’m integrating your script this afternoon.
Luigi said on March 17th, 2007 at 10:47 am:

I am a complete moron or something. I can’t get this thing figured out at all. Can someone hold my hand so I can take baby steps please?

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

Unfortunately Chris, from what experiments I’ve done, it looks like Google puts a server-side cap of 30 days for the date range. You can always make the date range shorter than 30 days, but not more. What would be a really cool feature would be to input the number of upcoming events you’d like to display from a specified date. The best work around I can suggest (though it could get ugly) would be to embed multiple calendars without the UI where each agenda displays a different but sequential 30-day date range.
Benjamin Allfree said on March 20th, 2007 at 10:08 am:

Anyone interested in running PHP inside DNN should check out http://www.nukelet.com
John said on April 2nd, 2007 at 4:52 am:

I would like to purchase the time of someone to customize an existing embedded calendar for us using this method. Please call 866−676−7284 x803
Lynne said on April 2nd, 2007 at 1:42 pm:

I am at a loss…
I keep getting this error when trying to load the php

CGI Error
The specified CGI application misbehaved by not returning a complete set of HTTP headers.

Any help apreciated
Brian said on April 3rd, 2007 at 12:22 am:

Lynne

I’m guessing that this is an IIS error, and it is probably due to an incorrect or badly configured installation of PHP. I would recommend that you create a PHP page that contains:

<?php
phpinfo();
?>

Then load that page to see what you get. Displaying the phpinfo is typically a good first step in determining if the installation worked and confirming the configuration.

The PHP manual is a good reference as well: http://us2.php.net/manual/en/install.php

Googling for that particular error message results in a wide spectrum of alleged causes and possible solutions—too many to list here.
Stephane said on May 2nd, 2007 at 10:39 am:

I added this line to make sure that accentuated caracters (eg: é è) appear correctly:

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

Works great. Thanks for sharing.
Stephane said on May 2nd, 2007 at 10:44 am:

My line didnt go through in the previous post. What it was supposed to be:

replace the head tag with the head tag plus a meta tag that specifies that the content is UTF-8.
George said on May 8th, 2007 at 8:59 am:

Hi Brian,
I can’t figured out why the calendar would not load correctly on my calendar.html! I was able to embed the original Google iframe.
I get an error: Warning: fopen(http://www.google.com/calendar/embed?src=neojazzique%40gmail.tld): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/georgedi/public_html/MyGoogleCal.php on line 56

Warning: feof(): supplied argument is not a valid stream resource in /home/georgedi/public_html/MyGoogleCal.php on line 57

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

Greatly appreciate your help!

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

George,

Try changing .tld to .com in the calendar URL.
George said on May 8th, 2007 at 9:31 am:

Brian — it worked! Thank you!

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

Thanks again!

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

Now the next and prev month nav buttons won’t work. Neither Today button works. I don’t get it.
In the stylesheet which one is the property for the background color. Right now is white. I cannot find it.

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

Is there any way users can add their own events to these calendars. I’ve succesfully incorporated the code into a site. But I would like for users to add an event or enter an appointment time themselves.

Can they do this from the site, or will they have to use their own Google account and have permissions to update that calendar through Google and not the website this calendar appears on.
George said on May 9th, 2007 at 6:49 am:

Hi Brian,

I managed to edit the stylesheet however I lost the navigation — I am not able to go to the next month. The agenda doesn’t work either. I changed only color properties — any ideas?

Thanks!

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

George,

As stated in the comments, there are (4) relative image URLs that must be changed to absolute URLs in the compiled Google stylesheet. You need to change them so they appear similar to:

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

Ronald,

The script doesn’t change how Google Calendar functions. It just allows you to change how it looks. All changes to the data must be done via Google Calendar’s normal interface.
George said on May 9th, 2007 at 3:16 pm:

Brian,

Thanks again! I managed to edit the CSS. I’ll keep Googles nav buttons for now. I couldn’t tell you why the navigation was messed up as I started over and followed the same steps.

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

Hi Brian,

how would you go about setting up the Calendar in a popup window? Sorry for the endless questions.

Thanks,

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

George,

Glad you got it working. Off the top of my head I would create a container web page for the calendar. Embed the calendar in that page. Then create a link to open that page in a popup window.

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

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

or

http://particletree.com/examples/lightbox/
George said on May 11th, 2007 at 5:51 am:

Thanks Brian,

I got it working with a basic onclick= “window.open(… etc. For some reason the Calendar doesn’t load as fast as you would expect. I assume it has to do with the CSS’ size since there are no graphics. That’s why my question in a first place regarding the popup.

Perhaps this could be helpful for someone else that wants to use the calendar in a pop-up.

Thanks for the suggestions and the links. I’ll post back.

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

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

I made a change in line 5 below.

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch); //HAD TO ADD THE $ch here to work on GoDaddy
curl_close($ch);
Yvette said on May 12th, 2007 at 10:19 pm:

I also had to change CURLOPT_HEADER to 0 so it wouldn’t show the header. Working perfectly now!
bl00k said on June 1st, 2007 at 9:53 am:

Hello,

I am not much of a coder, but I would love to put a google calendar in my gaming squads web page but don’t want it to clash, which is why I am here. I googled a solution and found this page. I haven’t really done CSS before. Could someone help me with a more step-by-step process to implementing this? If that is asking too much, could someone at least point me to a place to learn what I need to get this calendar looking presentable?

My current calendar is here: http://www.fighting69.com/schedule.html

My Google Calender is here: http://www.fighting69.com/scheduletest.html

I would like the color scheme to fit in with the site.
ZakMacDonald said on June 9th, 2007 at 3:19 pm:

First off, this is a very nice and useful tool for Google Calendars. I’ve modified to CSS a bit to fit the look of a current design job, but no matter what, setting heights, modifying your code:

$pattern = ‘/(rowspan=“5”)/’;
$replacement = ”;
$buffer = preg_replace($pattern, $replacement, $buffer);

Still no luck on getting the calendar to have the height of “one event per day”. If you have any advice It’d be much appreciated.
ZakMacDonald said on June 9th, 2007 at 8:08 pm:

bl00k,

Best thing I found is print screen your calendar in Photoshop, then use the eyedropper and copy the HEX code for whatever color it was and do a FIND > REPLACE in Dreamweaver or whatever program for that color with your new color. That’s the simplest way I found to edit the CSS, otherwise I’d kill myself finding what every single value means.
Brian said on June 9th, 2007 at 9:24 pm:

Zak,

If you load the embedded calendar in Firefox (i.e., type http://www.google.com/calendar/embed?src=user%40domain.tld in the address field), you can use the DOM Inspector extension to dissect the calendar. What you’ll discover is that simply removing the rowspans won’t accomplish your goal because the actual rows that the table cells are spanning still exist. With the DOM Inspector you’ll notice a pattern of a table row (for the days) followed by five table rows of class “grid-row” (for the events). In addition to removing the rowspans, you must also add a replacement pattern to remove the 2nd thru 5th grid-rows while keeping the first. Of course this means no event can overlap another event because there will be no row available to display it; more specifically, any events in a cell will be removed if it doesn’t occupy the first grid-row. The actual regex pattern isn’t simple, but certainly not impossible to write. If you make the regex only remove grid-rows that do not have at least one event, then you avoid the overlapping event problem, but of course it makes the regex pattern that much more complicated. Good luck.
Linden LAN » Blog Archive » Restyle Google Calendar Gadget said on June 18th, 2007 at 5:16 pm:

[…] how-to for restyling Google Calendar is by far this site’s most popular post so far. Right from the start, people had requested […]
Joseph said on July 1st, 2007 at 9:20 am:

Is there a way to make the event links open up in the same iframe as the calendar — or at least not open outside of the website the calendar is embedded in? Thanks!
Brian said on July 1st, 2007 at 2:04 pm:

See comment #27. You can go with the window.open method to open a popup window or try changing $replacement to an empty string or ‘target=“_parent“‘.
Joseph said on July 1st, 2007 at 4:19 pm:

Thanks for the quick response — I tried to use the method in comment #27 but what ends up happening is that the actual text gets replaced with the window.open command. So essentially the listed calendar event text is replaced, not the action when clicked… Any ideas? Thanks again!
Chris said on August 3rd, 2007 at 1:24 pm:

I’m having the same error as Lynne (Comment #37). What am I looking for when I create a test page for PHP installation? This test page displays a lot of information and I’m a lowly musician trying to organize different band schedules for a club. Thanks for any help!
Marcus said on August 8th, 2007 at 1:53 pm:

Can anyone help me change the background of the calendar to an Image or to transparent so that it will match up with my site? What do i need to do?
Brian said on August 8th, 2007 at 3:53 pm:

Marcus,

Load MyGoogleCal.php by itself. Don’t forget to specify the src either in the PHP file itself or in the query string. If you view the source, you’ll discover that the background color is controlled by an inline style in the body tag.

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

If you use Firefox and have the Firebug plug-in installed you can even change the color dynamically. It’ll help you visualize what will change.

Anyway, to change the background you’ll have to add another pattern-replacement code block.

$pattern = ‘style=“background-color: rgb(255, 255, 255);”’;
$replacement = ‘style=“background-color: rgb(0, 0, 0);“‘;
$buffer = preg_replace($pattern, $replacement, $buffer);

The above block will change the color to black. You can set the $replacement string to any valid inline style. If you want the background to be transparent, then set $replacement to an empty string, i.e. ”.

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

Chris,

Well it sounds like the phpinfo() command worked. I would check the php version to make sure you have the latest and greatest then. As I explained in Comment #38, the cause of that error can be one of many things. If you have direct access to the server, I’d recommend trying to find a friend who’s knowledgeable and can help you configure your server.
Marcus said on August 9th, 2007 at 6:30 am:

Thank you so much Brian! I’ll give that a shot sometime tonight.
Kent Gottschalk Hansen said on August 24th, 2007 at 3:21 am:

Thanks for the SuperB script. I’m having trouble with the characterset, hope someone can help.

If I insert a google calendar the normal way, special danish letters are displayed correctly — however if I use this php script the characters are not displayed correctly.
Brian said on August 24th, 2007 at 8:23 am:

Kent,

I think someone else (comment #39 and #40) went through a similar problem and their solution was to add another pattern-replacement code block. Based on the description, I believe it looked something like this:

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

The code is untested but should work. Just add this to the end of the PHP file and you should be good to go.
Sylvain said on August 29th, 2007 at 8:58 am:

Thank you for your blog. I used it to add color and tool tip. Have a look to September-> http://tinyurl.com/3ykavd
Sylvain said on August 30th, 2007 at 12:31 pm:

Now, the date, the place and the description are in the tool tip.
Karena said on September 7th, 2007 at 10:46 am:

Ok this has been working great for months and then suddenly all i get is the title of the calendar and an error on Line 21 “Object doesnt support this property or method.” did google change something? is anyone else’s calendar’s suddenly stopped working with this script? ideas, anyone?

Thanks for a great script — hope to keep using it!
Brian said on September 7th, 2007 at 9:09 pm:

It would appear that Google has indeed changed how the embedded calendar is generated. If you try the embeddable Google Calendar configuration utility to style the calendar, you’ll notice some new options—including multiple calendars. The previews shows that colors assigned to different calendars are preserved. So that looks promising. Still fine tuning the fonts and colors of the calendar itself isn’t possible so I have some work ahead of me. Unfortunately I’m currently travelling and cannot devote my full attention to devising a fix at the moment. I’ll post a comment when I manage to come up with a solution. So stay tuned by subscribing to the comment feed.
Michael Mc said on September 7th, 2007 at 11:29 pm:

OK, after some more poking around, I found a work around for the problem…Google’s old style calendar that can be tweaked is still available by changing the URLs from:

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

TO

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

I don’t know how long this will be available but I am happy for now…
Brian said on September 8th, 2007 at 6:16 am:

That’s some good sleuthing Michael. Thanks! That will certainly get everyone’s calendars back to normal and tide things over until I can update the script to use Google’s new format.
Izabael DaJinn said on September 9th, 2007 at 11:39 pm:

OMG! Thank you so much for being on the ball with a workaround. I love this script. It’s been a life saver to use google calendar on my site since it would be exceedingly ugly otherwise. Their new tool is still a joke compared to the power of this little script!

*iza
Michael Mc said on September 16th, 2007 at 11:20 am:

I agree with you Izabel, the powder blue just wouldn’t work with my church’s web site which is in green. I am glad that I could contribute something to Brian’s efforts in making the Google calendar customizable. If you want to see what I did you can visit:

http://www.standrewmoore.org/
Michael Mc said on September 16th, 2007 at 11:21 am:

Oops, http://www.standrewmoore.org/calendar.htm
Scott said on September 17th, 2007 at 8:43 pm:

This is a great script. We are using it on our Boy Scout website, but my employer has a proxy that is prohibiting the IFrame from loading a page that contains an email address in the URL. This is a problem when you use the PREVIOUS and NEXT and TODAY buttons. The email address is the gmail.com account in the URL. I was going to code a convoluted work-around that would add an onClick event to these <A> tags that would put the HREF tag in a hidden form which would get posted to the parent page. I’m not sure it would work and it’d be very clumbsy — not to even mention a pain when google changes things again. Do you have any thoughts on this o great scripter? Thanks!!!
Scott said on September 17th, 2007 at 8:49 pm:

[ EDIT OF PREVIOUS POST ]

My plan was to post the form to the IFrame (not parent page) and use the posted variables to get the html (fopen) –> avoiding the email address from being in the IFrame source URL was the objective. Thanks!!!
Brian said on September 18th, 2007 at 5:37 am:

Scott,

More often than not, it’s better to solve a problem by configuration than by coding, especially if the configuration is the source of the problem. So, the right way to handle this situation would be to convince your employer to add an exception to the proxy filter to allow all traffic to/from Google Calendar. I find it odd that you’re able to load the main calendar (via the script), but the previous, next, and today buttons don’t work because they all have an email address in the URL query string. I doubt loading the calendar via a form will make a difference since you still have to make the same HTTP request to the same URL to get the same data.
Scott said on September 19th, 2007 at 10:34 pm:

Yes, and I had tried going down the configuration route already; unfortunately that didn’t get very far. I wrapped up the coding tonight and it works like a champ. We’ll see how long it lasts. Thanks again for the work you have/do put into the Google Calendar customizations.
Jason G. Williscroft said on September 27th, 2007 at 10:40 pm:

Michael Mc, you sonofagun, you fixed the calendar on my homepage!
Levi said on October 2nd, 2007 at 1:55 pm:

Hey, first off this is a great thing that you have here. Anyways, like everyone else I am trying to get my google calendar to look like my GREEN site and have had no luck. I put in the code that you have but I still have trouble getting it to read my stylesheet. I got it to where the calendar is there and it comes up. But no styles at all. I don’t know what the deal is. My page that this is on is:
http://kennethetta.com/index.php?option=com_content&task=view&id=20&Itemid=21
thanks guys.
Brian said on October 2nd, 2007 at 7:42 pm:

Levi,

You downloaded the wrong stylesheet. See comment #5 on how to download the stylesheet. The correct stylesheet’s second line, after the copyright, should begin with

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

The one you have begins with

#calendarsBottomChrome{font-family:Verdana;…

From now on you have to use

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

instead of

http://www.google.com/calendar/embed
Levi said on October 8th, 2007 at 6:36 am:

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

… into the code, it comes back with an error saying it needs to be backslashed or something? But I made it look like the other $replacements and it just doesn’t do anything but give me white. Is there something else that I need to be doing? Thanks!
Levi said on October 8th, 2007 at 6:54 am:

Oh hey guys! Nvm! I just put it in the URL on the iframe and it worked. THanks for all your help, I will let y’all know if I get this calendar completely redone. Thanks SO SO MUCH! I had no idea you could do this!
Levi said on October 8th, 2007 at 9:09 am:

I finished (for the most part) skinning it. So, here is just another example of this wonderful blog put to use: http://kennethetta.com/index.php?option=com_content&task=view&id=20&Itemid=21
Levi said on October 10th, 2007 at 8:49 am:

Update: just wanted to let ya’ll know this helped me create 2 different great calendars! Thanks guys!

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

and the old one is posted above.

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

[…] long awaited new version of MyGoogleCal is here. It supports the new AJAX-enabled Javascript method Google switched to last month. As a […]
Eric Bidwell said on October 16th, 2007 at 11:03 pm:

Any idea on the possibility of getting a print feature using “@media print” in the stylesheet?
Brian said on October 17th, 2007 at 9:19 am:

Eric,

Please elaborate. The stylesheet for the HTML embeddable calendar already has an “@media print” style. It may be more useful if you explain what you are trying to accomplish because both the HTML and Javascript versions of the calendar are printable as-is.
Eric Bidwell said on October 18th, 2007 at 1:17 pm:

I don’t have a printer but I did a print to PDF and it lost some of the styling. I should have mentioned it before, I was thinking that the “@media print” function might open up the print features that are available from the google calendar account with the options for type of view and data included. I’m guessing that’s not the case since you didn’t mention that Since I posted that I have redone the calendar in the new way you described a few days ago. The “@media print” is not in the new CSS file. I already put in a request at google to add the print feature to the embedded calendars and they responded saying they’ll look into it, so maybe they will add that soon and it will just show up on our calendars one day. Thanks for the amazingly helpful tutorial. Though if you end up doing another, since you’ve had to redo it before, maybe you could really pin down a step by step. I managed my way through it but not without quite a bit of difficulty. More specifically it took me a while to figure out where to put the files on my server (yes I know it’s arbitrary) and how to change the relative URLs to point at them. I also had some issues adjusting the CSS, though maybe asking for a key would be too much. Maybe I’m a bit less knowledgeable than your target, I know just enough HTML, CSS, and PHP to stumble around guessing and checking but I made it none the less. Now to go and theme the CSS again since I updated… I’ll try to remember to come and leave a link to my calendar once I get it finished. Thanks again, this really is a great help.
Michael Mc said on October 24th, 2007 at 1:36 pm:

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

Second off, it appears that Google’s use of JavaScript to generate the new version of the calendar is WAY too tough for me to crack. I really hope Brian can figure it out.
Brian said on October 24th, 2007 at 2:49 pm:

Actually, I did Michael. Check out the link at the top of the page to see the latest version.

May I recommend subscribing to the RSS feed: http://www.lindenlan.net/feed/.
Michael Mc said on November 1st, 2007 at 6:43 am:

Brian,

I apologize, I never looked at the TOP of the page! I will work on the new version this weekend.

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

Thank you so much,
Michael McCall
http://www.castlemccall.com/
Landry said on December 2nd, 2007 at 1:13 am:

Hello

Thanks for this great resource. I am using the above code (see#84) to set the background to transparent. It does not work. I get the following messages appear at the top of the page.

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

Any ideas what I could be doing wrong?

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

Beg your pardon .. I wasn’t using the latest version
Ralph said on December 13th, 2007 at 5:02 pm:

Hi there,

For an unknown reason I can’t get the script to take the newly provided CSS.

Here’s a link to my calendar and you can see the script by looking at the source code. Any help would be really appreciated.

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

Thanks,
Ralph
Brian said on December 15th, 2007 at 2:43 pm:

If you obtained the CSS via the “google.com/calendar/embed” URL it will probably not work. This version uses the CSS from the “google.com/calendar/htmlembed” URL.
david said on March 1st, 2008 at 10:15 pm:

I have and embeded iframe that works fine but it is read only. How do you create events?
Brian said on March 2nd, 2008 at 11:34 pm:

David,

Unless you have a specific reason for using this version of the script, you should really upgrade to the newer version. It has more features and uses the more secure curl function instead of fopen by default. I’ve unofficially discontinued support for this version.
Scott said on March 5th, 2008 at 11:56 am:

Aloha, I have been trying to apply your Google calendar restyle and have been pulling my hair out trying to figure how all this works. I’m a visual design guy and not very good at coding. I could use the calendar as is but it really clashes with my clients’ RED color palette. I am willing to hire you or donate to your site. I just need it to work. Any help will be appreciated. My staging site is at http://www.ipolynesia.com/kahuku/calendar-main.htm
Mahalo.
Mike said on June 29th, 2008 at 8:02 am:

Hi– I use Google Calendar on my page, but like the post before me, I know NOTHING about how to modify/customize it. The changes I want are pretty simple (smaller font, etc.). Is there any resource (here or elsewhere) where I might be able to hire someone to make these changes for me? Thank you in advance for any advice! ~mike
Geoff said on July 30th, 2008 at 1:37 pm:

I did as you told me and I can tell this is going to work perfectly, but right now none of the query that i put it does anything and it keeps coming up with the default calendar. What am I doing wrong? Thanks.
steve said on August 30th, 2008 at 2:46 am:

I have the calendar showing up, but I can’t get it to use my own css style sheet. This is what I’ve changed in the code: $stylesheet = ‘calendar.css’;(the name of my stylesheet in the same folder as my calendar.php). $url =”(should I put the embed url here?)”, $replacement = ‘calendar.php’; (the name of my calendar page), finally <iframe src=“calendar.php?src=orthodox.london%40googlemail.com”. Have any idea what I’m doing wrong?
Erica said on September 27th, 2008 at 12:51 am:

My google calendar is working fine now, JUST ONE QUESTION. I can not seem to remove the “printer” icon that sits next to the tabs. When the script: “showPrint=0&” is added to the query string, nothing happens. It does however work with my original calendar script. But when using these files, it doesn’t work. Why won’t it delete?

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

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

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”

So I have 2 choices… either get it to work OR just get rid of it. Can anyone help? PLEASE!! Is the path above wrong? What is it looking for?
Erica said on September 27th, 2008 at 1:54 pm:

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

Hope you can’t help. Last thing looking to fix.
Erica said on September 27th, 2008 at 1:56 pm:

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

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

Thanks!
digifix said on December 14th, 2008 at 12:21 pm:

Im using a Joomla module to display googlecal.…I want to use your technique above but I dont know where to begin to find the css, src files etc in the backend of Joomla. any one else as clueless as i am?

Thank you in advance.…I would be more than willing to pay for a solution.
Jason Smith said on December 19th, 2008 at 1:49 pm:

I am having trouble loading the new style sheet. I can pass the calendar through the php script as indicated in the instructions. At that point the calendar loses all of its styling as indicated in the instructions. I have successfully downloaded the style sheet and referenced it in the php script. here in lies the problem. The stylesheet i have saved as “mygooglecal.css” is not styling the embedded cal? im not exactly sure where i went wrong? i know the path is correct.

here is the page:

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

let me know if anyone can help! Thanks for the great script!
Brian said on December 19th, 2008 at 4:12 pm:

Please use version 4 of the script. This version is no longer supported.

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

Subscribe to this post/thread

Restyle Google Calendar

110 Responses to “Restyle Google Calendar”

Tags

Archives