U-notez » Easy Color Customization for Embedded Google Calendars

Easy Color Customization for Embedded Google Calendars

Posted by Chris Dornfeld at 2:07 pm on April 21, 2009 • Programming, User interfaces

Clients often come to us for assistance integrating an events calendar into a web site, and we frequently recommend Google Calendar. It has a flexible and user-friendly interface for both web site visitors and calendar managers. What it doesn’t have, unfortunately, is a way to customize its color scheme.

I had the opportunity to tackle this shortcoming for a recent project and you can find a copy of my script below, followed by an explanation of the approach I used. With this script, you’ll be able to set your own color scheme for an embedded Google Calendar. To illustrate, here are some screenshots showing “before” (on the left) and “after” (on the right):

gcalendar-wrapper screenshots

Of course, you can use this script to make your embedded calendar appear any color you like.

Requirements

PHP 4.3.0 or later
Support for one of the following JSON libraries:
- PECL JSON extension (built in to PHP 5.2.0 and higher) or
- PEAR::Services_JSON package
Support for one of the following http methods:
- cURL extension or
- allow_url_fopen configuration option

Check your phpinfo screen to see if your server meets the requirements — or, if you’re feeling lucky, just cross your fingers and run the script.

Installation and Usage

1. Create your Google Calendar and embed the calendar on your web site using your preferred size and settings. Make sure it appears correctly with the default Google Calendar “skin”.

2. Download the wrapper script (version 2009-10-13) as a ZIP file

3. Unzip the archive to extract the script itself, gcalendar-wrapper.php

4. Edit gcalendar-wrapper.php in a text editor, such as Notepad

5. Customize the following lines at the top of the script according to your needs:

/**
 * Set your color scheme below
 */
$calColorBgDark      = '#c3d9ff';	// dark background color
$calColorTextOnDark  = '#000000';	// text appearing on top of dark bg color
$calColorBgLight     = '#e8eef7';	// light background color
$calColorTextOnLight = '#000000';	// text appearing on top of light bg color
$calColorBgToday     = '#ffffcc';	// background color for "today" box

You can use a tool like the one at html-color-codes.info to pick your HTML color codes.

6. Upload gcalendar-wrapper.php to your web server

7. On the pages where you display an embedded Google Calendar, change the calendar embedding code to point to gcalendar-wrapper.php instead of http://www.google.com/calendar/embed (or the equivalent URL if you’re using Google Apps for Domains). For example, if your embedding code currently looks like this:

<iframe src="http://www.google.com/calendar/embed?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

edit the HTML to look like this instead:

<iframe src="gcalendar-wrapper.php?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

8. Browse to your page to test out your customized calendar! If you still see the standard Google Calendar appearance, make sure to clear your browser’s cache and try again.

Limitations

To keep things simple, this script reduces the Google Calendar color scheme to just 5 different colors, even though Google’s original stylesheet uses more shades. In addition, images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).

After creating this solution, I came across a similar skinning effort called MyGoogleCal4 that allows more fine-grained control over the calendar appearance. It takes more legwork to create your own theme, but anyone interested in replacing the calendar graphics or making advanced stylesheet changes should definitely give it a look.

Technical Details

The gcalendar-wrapper.php script works by downloading the embedded Google Calendar source code from Google’s server, modifying CSS styles and JavaScript on the fly, then outputting the customized calendar code to the user’s browser. The Google Calendar embedding code contains a JSON-encoded data structure with information about the calendar events plus external links to a JavaScript library and CSS stylesheet located elsewhere on Google’s servers. For simplicity, this script just inserts new CSS and JavaScript directly into the main embedding code to override the relevant parts of those external files.

To change the color scheme, I started by scraping the stock Google Calendar stylesheet and identifying the minimal set of styles needed to apply new colors. New style rules are generated dynamically based on the color scheme settings to save the hassle of repeatedly copying and pasting color codes in several places. These custom styles are then inserted at the end of the HEAD section of the embedding code with priority set to override the original styles.

Google Calendar’s code makes use of relative links and file references that get thrown off when routed through the wrapper script, so it’s also necessary to make a change to the base URL within the JSON data structure that holds calendar event data. The JSON string first has to be spliced out using a regular expression and converted to a PHP data structure we can manipulate, then serialized back into a JSON string to replace the original data.

Keep in Mind…

The calendar customization script is closely tied to Google Calendar’s underlying stylesheets and JavaScript code. When Google launches a new version of Google Calendar (as they’ve done in the past when launching new features) this script may need to be updated to reflect Google’s changes. When that happens, your embedded calendars may revert to the standard Google Calendar appearance or may even show an error message. Don’t forget to check up on your calendars periodically so you’ll know if Google has made any major changes. I’ll make an effort to post an updated wrapper script whenever I see that Google has revised its code.

Feel free to respond in the comments below with questions or suggestions. I hope you find the script useful!

Great stuff, thanks!

Comment by Jon at 10:33 pm on May 11, 2009

Thank you! This is by far one of the best Google Calendar helps out there. Bravo!

Comment by Bryan at 6:10 pm on May 26, 2009

Thanks so much! I am a volunteer at an animal shelter, and I’m trying to get a calendar up on the website that will work with the rest of the web design. I haven’t tried it out yet, but this looks like just the help I needed!

Comment by Caitlin at 12:05 pm on May 27, 2009

Great script Chris, but i got one Q… i got calendar language on my site to be spanish or some other then english ?? What can i do to change that ? When i embade original iframe src its on english ok ..

Comment by oserk at 7:52 am on May 29, 2009

Re #4: I haven’t been able to reproduce the language issue you described, but you can force the Google Calendar interface to appear in English by adding the parameter &hl=en to the end of your embedding URL. You can also substitute a different language code as appropriate (fr=French, de=German, etc.).

Comment by Chris Dornfeld at 12:18 pm on June 1, 2009

I attempted to use this but nothing shows up where the calendar should be. The space is there but it’s just white. Does this mean that the server does not have the correct software?

Comment by Chris at 9:50 am on June 3, 2009

Hi, I attempted to use the code, but it doesn’t quite work. Is there anything else I need to do but simply replace “http://www.google.com/calendar/embed”.
Because the rest of that link to the calendar doesn’t actually look like what you posted. Now google just points to the user’s ID without “calendar.google.com.”

Thanks.

Comment by jackee at 3:03 pm on June 30, 2009

(#7 was resolved by enabling public calendar sharing in the Google Calendar settings.)

Comment by Chris Dornfeld at 4:14 pm on June 30, 2009

Worked perfectly! Give yourself a raise!

THANK YOU!!!!

Comment by C. Wade at 1:56 pm on July 20, 2009

Works great. Thanks very much for this. The only issue I have is that it fairly regularly gives an error “Moved Temporarily The document has moved here”. When I click on the “here”, it gives me the calendar with normal google colors. If you go to my website, you may be able to see this.

Comment by Phil at 3:50 pm on August 4, 2009

Re #10: I have posted a new version of the script that addresses the “Moved Temporarily” issue (that message may appear intermittently when viewing a calendar using the wrapper script). You can download the updated version (dated 2009-08-07) using the link in the article above. Note that your web server must have the following settings in place for the fix to take effect:

- The cURL module must be enabled, with libcurl library version 7.15.2 or higher
- PHP’s safe_mode setting must be turned Off
- PHP’s open_basedir setting must be disabled (”no value”)

You can verify those on your phpinfo screen (see “Requirements” above). If your server doesn’t match these settings and you can’t change them, no problem; the wrapper script will still work, though you may still see the “Moved” screen occasionally.

Comment by Chris Dornfeld at 6:53 pm on August 7, 2009

You stated that “images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).”

However, I was able to change those images by copying the original google gif used for these images (calendar.google.com/googlecalendar/images/combined_v9.gif), altering it, uploading it to my site, and then adding some overriding CSS code to point it to the new image instead of the old. In fact, as far as I can tell – I can use your script to override *any* Google css as long as I can identify the class or ID used to control it. It has been VERY helpful Thanks for this solution – I’d been researching for HOURS on how to override Google’s css code and you script made it painfully easy given how many other things I’d tried.

Comment by Baraslan at 10:37 am on August 28, 2009

EDIT: My previous comment implied you could change the print Icon. It appears this is not controlled in the CSS but hardcoded in one of the JS files the application calls, so I have been unable to find a way to change it. However the image used for the previous/next arrows *are* referenced in the CSS so those *can* be changed.

Comment by Baraslan at 11:39 am on August 28, 2009

Hi Baraslan, thanks for your comments. When the instructions say the interface images “can’t be customized,” that is just to say that the gcalendar-wrapper script itself doesn’t provide an easy way to substitute your own images. As you said, with some further CSS hacking it’s possible to swap out some of the calendar graphics.

Comment by Chris Dornfeld at 11:56 am on August 28, 2009

Mine is not showing up at all- although it did when it was just regular google calendar. It is supposed to be at the bottom left corner on this page: http://saladowine.com/.

Can you please take a look when you have a moment, I must have messed something up in my code or perhaps don’t have the requirements. Thank you!
Liz

Comment by Liz O. at 12:01 pm on August 28, 2009

(#15 was resolved by installing the PEAR::Services_JSON package on a server running an older version of PHP.)

Comment by Chris Dornfeld at 12:52 pm on August 28, 2009

attempting to use this, have latest php on my godaddy hosting plan.

error i receive when calendar tries to launch

note i have replaced my username with USERNAME to protect identity.

Warning: main(Services/JSON.php) [function.main]: failed to open stream: No such file or directory in /home/content/b/l/o/username/html/gcalendar-wrapper.php on line 262

Fatal error: main() [function.require]: Failed opening required ‘Services/JSON.php’ (include_path=’.:/usr/local/lib/php’) in /home/content/b/l/o/username/html/gcalendar-wrapper.php on line 262

any help would be greatly appreciated!

Comment by Jen G. at 3:43 pm on September 8, 2009

(#17 was resolved by renaming gcalendar-wrapper.php to gcalendar-wrapper.php5 on GoDaddy hosting.)

Comment by Chris Dornfeld at 4:44 pm on September 8, 2009

So…. How do you set a background color for the iframe? It’s there and the colors are set, but there’s a little white triangle where the rounded corners are…

Comment by mdr6273 at 4:51 pm on September 24, 2009

Was working…started showing busy instead of the event title. All the dates and times are correct, but everything show busy.
This is one without the wrapper http://www.fairviewmw.org/calendar.html
This is one with the wrapper http://www.fairviewmw.org/calendar2.html
Did Google update something?
Any help would be appreciated!

Comment by Troy B at 1:14 am on September 29, 2009

Figured it out. For some reason my calendar switched from Show Details to Show Free/Busy.
Thanks for making a great calendar better!

Comment by Troy B at 11:09 pm on September 29, 2009

I have the same files on two different servers…

http://www.powerplantonline.com/calendartest.html
http://element26studios.com/calendartest.html

The first one works, but the second doesn’t seem to work at all. I’ve tried a variety of changes to fix, but I can’t seem to get the second one to work. It’s on a GoDaddy server and I’ve tried the fix on comment #18 but to no avail… Actually the fix on #18 made the first one work, but did nothing on the second…

Comment by Brian H at 5:15 pm on September 30, 2009

To mdr6273 (#19): I’m unable to reproduce the background color issue you described. I set a background color by going to “Customize the color, size, and other options” in Google’s “Embed This Calendar” tool. You can also replace the HTML color code from Google’s color picker with any color code you like.

Comment by Chris Dornfeld at 3:50 pm on October 9, 2009

Was working fine for the last two months… them the customer went in and added some dates and now nothing shows up. Standard method works though… check that out at: http://www.motherstavern.com/?location=events

Any help would be awesome!

Comment by Shaun Harrington at 7:55 pm on October 13, 2009

Hi Shaun (#24): I’ve just updated the download link above with a new version of the script that will fix the issue you encountered. One of the events on your calendar had a dollar sign in the title (”$2 Happy Hour”) that was tripping up a regular expression in the code. Thanks for the report!

Comment by Chris Dornfeld at 10:38 pm on October 13, 2009

You my friend, are a genius!

Comment by Duke at 2:35 pm on October 15, 2009

I use this wrapper script on 2 sites both hosted on Elimu-Maisha.com. They are both though on different subdomains. One is aac.elimu-maisha.com and the other is intapp.elimu-maisha.com. On the aac site everything works perfectly no problems, however on the intapp site it gives me a cut off section of my website in the frame and gives me a Error 404 – Not Found… please check it out intapp.elimu-maisha.com and any assistance would be greatly apprecaited.

Comment by Samuel Kingsbury at 9:41 pm on October 22, 2009

Hey,
Thanks so much for the fix… and the point out that I probably had a typo… which I did.. its a great script and I really appreciate you putting your time into it.

Comment by Samuel Kingsbury at 3:41 pm on October 23, 2009

Hi,

first off, great little script here, I am grateful there are smarter people out there willing to share their ideas/scripts for the common person to make use. I am having some difficulties with this script cutting off the displayed events after ~a month. We have a calendar with events scheduled well into the future (as much as a couple years), and when I use your script to embed the calendar, for some reason the events aren’t being shown more than ~a month in advance. If I embed straight from google, all of the events show up normally. Is this a result of google updating the calendars, or possibly some sort of timing out on the wrapper script when there are so many events?

I really appreciate any insight you might have, thank you

Comment by Matt at 4:26 pm on November 5, 2009

well i wish to heck this worked for me, i was able to display the style sheet from someone else that used your method but for some reason the free server I’m currently on will not seem to run your code, any suggestions would be appreciated.

Comment by Chris at 10:55 pm on November 5, 2009

my web host has open_basedir set, not disabled.. does that mean there is no work around for me to accomplish this?

Comment by Chris at 11:29 pm on November 5, 2009

i followed all the instructions on this great tutorial but doesn’t seem to work at all. Any advice?

http://www.partylifenetwork.com/eventcalendar.html

Comment by Bernard at 4:07 am on November 6, 2009

moved calendar to http://www.partylifenetwork.com/betacalendar.html

i am now getting this messsage:
Warning: main(Services/JSON.php) [function.main]: failed to open stream: No such file or directory in /home/donedeal/public_html/partylifenetwork.com/gcalendar-wrapper.php on line 262

Fatal error: main() [function.require]: Failed opening required ‘Services/JSON.php’ (include_path=’/usr/lib/php:.:/usr/php4/lib/php:/usr/local/php4/lib/php’) in /home/donedeal/public_html/partylifenetwork.com/gcalendar-wrapper.php on line 262

Comment by Bernard at 4:30 am on November 6, 2009

To Chris (#31): Having the PHP open_basedir setting enabled on your web server is not normally an issue. It just means that visitors may rarely see a “Moved Temporarily” message with a link they have to click to load the calendar. See my earlier comment #11 for more details.

To Bernard (#32/33): It sounds like your server is running an old version of PHP, so you’ll need to install the PEAR::Services_JSON library. Here’s how to do that.

1. Go here:
http://svn.php.net/viewvc/pear/packages/Services_JSON/trunk/JSON.php?view=log

2. Click the (download) link next to “Links to HEAD”

3. Save the file and name it: JSON.php (case sensitive)

4. On your web server, in the same location as gcalendar-wrapper.php, create a folder called: Services (also case sensitive)

5. Upload JSON.php into the Services folder

6. Reload your embedded calendar page

Comment by Chris Dornfeld at 5:32 pm on November 6, 2009

Thanks very much…everything seems to b working now.

Comment by Bernard at 7:27 pm on November 6, 2009

Great script, thanks for everything!!!!

Comment by Joe from Tampa FL at 9:57 pm on November 10, 2009

Awesome! Thanks so much, but why wouldn’t google have this simple functionality built in. It seems so strange. I mean, look what they’ve put you through…

Comment by Drew at 4:31 am on November 15, 2009

The script worked at the beginning and few reloads on WordPress stopped working. Anybody knows why?

Comment by Daniel at 8:27 pm on November 22, 2009

Thanks for that script it sounds great.
Unfortunately, I did the install as it explained
but nothing is displayed on my page.
No warnings or something.
I configure my php.ini properly

json support enabled
json version 1.2.1

allow_url_fopen On
allow_url_include On

Can you help me ?

Thanks

Comment by Lucas at 7:49 am on November 26, 2009

Mmm, I think I spoke too fast.
I tried once more and it did work, but I really
don’t know why.
Anyway, now I’ve got nice colors in my calendar.

Comment by Lucas at 4:06 pm on November 26, 2009

How do you change the full-day event to not be blue?

Comment by Jane at 8:42 am on November 28, 2009

PURE GENIUS – Thank you SOOOOOOOOOO much

Comment by Alice the Brit at 9:59 am on December 4, 2009

is there a more extensive list than those 5 colors? the main thing I think a lot of people are gonna want to do is change the white to match the background color of the page.

does anyone know more class names?

I’ve been trying to just guess with little success.

Comment by Jeffrey at 10:51 am on December 6, 2009

Hi Jeffrey, the background color can be customized in Google Calendar itself. Go to “Calendar settings” and pick “Customize the color, size, and other options” under “Embed This Calendar”. Click the background color swatch and choose a new color. If you need to use a color that isn’t part of the built-in palette, just modify the calendar embedding URL that Google gives you to insert your own color code for the “bgcolor” parameter.

There are undoubtedly other design elements that some people may want to customize as well. To discover the appropriate CSS elements (so that you can insert additional style rules in the script) you may find it useful to use a tool like the Firebug add-on for Firefox.

Comment by Chris Dornfeld at 12:07 am on December 8, 2009

Thanks so much for this. I did end up using http://www.restylegc.com/ (previously known as MyGoogleCal) because I can control the fonts with the style sheet included. Thanks for the link to that!

@Chris Dornfeld — the restylegc has full CSS with it, so you can modify the exact CSS elements easily.

Comment by Angela Bowman at 8:15 pm on December 8, 2009

Dear Unitz Team,
I’ve been a huge fan of your system. It’s the coolest thing, and I love being able to customize the appearance of the calendar to match the site.

Our problem is that we had the system working perfectly on our server for months, and then all of a sudden BOOM! It just stopped working.

We’ve backtracked, and started from scratch- downloaded the latest file, got the latest Google embed code, re-uploaded, etc, but no luck.

The Google calendar itself works fine on the site, but when we point to the gcalendar-wrapper.php file, it just goes blank. There are no error messages on the page, it just blanks out.

Any advice?

Kelli

Comment by Kelli at 8:35 pm on December 15, 2009

Thanks so much for sharing this script! I’m using it for a client site and it does exactly what I need. Much appreciated.

Comment by Sarah Lewis at 3:01 pm on December 28, 2009

Great script! Although one thing is driving me crazy… is there no way to remove the title? I’m displaying an agenda and in the initial Google Calendar code ’showTitle=0′ is set, so it shouldn’t display a title. It works fine before I insert the gcalendar script however once I add it I get the calendar title back… I’d love to loose this title, any help would be appreciated.

Thanks,

Alan.

Comment by Alan at 11:34 pm on January 1, 2010

Hey Alan, the script works just fine with the showTitle=0 parameter in my testing. I’d suggest checking for any possible typos in your URL.

Comment by Chris Dornfeld at 10:02 pm on January 3, 2010

This is a great script! Love the idea!!! I am having an issue though that I can’t figure out. I’m using Google Apps and the calendar show correctly on my web page ( http://beautifulvictory.com/events.html) However, when I add an event to the calendar, it does not update on my site. Please help me figure this out as I really would love to use this. Thanks ahead of time!!!

Comment by Brandon P. at 2:06 pm on January 25, 2010

THANK YOU!!! My church website has a brown color scheme, and the google calendar on the home page looked like it was just plopped there and did not fit in. Now it matches the color scheme perfectly

Comment by Jay J at 9:25 pm on January 31, 2010

l like your script and it works fine, but when i use it my calendar changes my home language to english. How can I get my language back?

Comment by Kiki at 11:05 pm on February 4, 2010

To Kiki (#52): See my advice above in comment #5. To force the calendar to Hungarian, for example, make sure the parameter &hl=hr appears in your calendar URL.

Comment by Chris Dornfeld at 11:26 pm on February 4, 2010

Now all works perfectly, thank you very much for this script and help!Stay well!

Comment by Kiki at 12:27 am on February 6, 2010

this is outstanding work! thank you..

Comment by muzo178 at 5:15 am on February 12, 2010

HI Chris,
Thanks for looks like a great script!
I have done all the steps you recommend, but I am getting the google log in screen instead of the calendar.
Our old calendar was at http://www.shastaabbey.org/new/calendar.html
The new one with your revised code is at http://www.shastaabbey.org/new/calendarTest.html

Do you see what the problem might be. I would be VERY grateful for any help.
Thanks,
Mary Helen

Comment by Mary Helen Fein at 1:39 pm on February 21, 2010

Thanks so much Chris for sending an email and solving this problem. I signed out of Google, then deleted my temporary files. Then when I reopened the calendar it was right! Plus great color changes.
Mary Helen

Comment by Mary Helen Fein at 12:08 pm on February 22, 2010

Thanks so much for this code.

I’m having a problem I wonder if anyone can help with.

This wrapper works great on a page and in the front page’s sidebar.
BUT it returns a 404 error when show in the sidebar of individual posts.

(e.g http://www.phoenixkarate.info/news/summer-camps-are-coming Left sidebar, scroll down)

Any idea what I’ve done wrong?

Thanks!
Julie

Comment by Julie at 8:51 am on February 26, 2010

Can this be used with a Joomla site?

Comment by September Coll at 2:11 am on February 28, 2010

This is soooo very awesome! How can I change the color behind an event? I changed it on the actual google calendar and it didn’t come across to the embedded calendar :( http://www.trinityalternative.com/events/calendar.html

Thanks!

Comment by Melanie at 8:01 pm on March 7, 2010

U-notez Blog

Categories

Archives

Search