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):
Of course, you can use this script to make your embedded calendar appear any color you like.
- PHP 4.3.0 or later
- Support for one of the following JSON libraries:
- Support for one of the following https methods:
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 2010-11-15) 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:
23 24 25 26 27 28 29 30
/** * 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 &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 &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.
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 RESTYLEgc 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.
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…
Feel free to respond in the comments below with questions or suggestions. I hope you find the script useful!