Unitz LLC
Home   |   Unitz News   |   Contact Us

Easy Color Customization for Embedded Google Calendars

Bookmark and Share
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

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
&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 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.

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!

214 Comments »

  1. ものhalios腕時計でのハードと高速走行しているが、最近いじめのデザインは2013年にリリースされる3つの今後のモデルのための。新しいモデルの小さな部分と呼ばれるダイバースパンのブロンズ製の箱入りの兄弟と、デルフィンというより大きくてより深刻なダイバー。 http://www.gowatchs.com/brand-232.html

    Comment by ものhalios腕時計でのハードと高速走行しているが、最近いじめのデザインは2013年にリリースされる3つの今後のモデルのための。新しいモデルの小さな部分と呼ばれるダイバースパンのブロ at 4:41 pm on March 9, 2016

  2. 18(78)は、ブローヴァ腕時計マンチェスターユナイテッド・クラブの分のマーカーは、1878年(明治11年)の日付は、緑と金で印刷されます。これは非常に賢い(と超便利)クラブの起源へのうなずきです。鉄道の接続を参照して、ダイヤルの間の12時間18分のマーカーの端のまわりで列車トラックの範囲を実行します。これは我々に思い出させました輸入部のランカシャーとヨークシャーのレール・システムによってマンチェスターの開発においては産業革命の間に。 http://www.eevance.com/News/9d4c2f636f067f89.html

    Comment by 18(78)は、ブローヴァ腕時計マンチェスターユナイテッド・クラブの分のマーカーは、1878年(明治11年)の日付は、緑と金で印刷されます。これは非常に賢い(と超便利)クラブの起源へ at 4:41 pm on March 9, 2016

  3. 非常に優美かつ独特で、ずっと優雅な姿で潮流の最高峰に立って、流行に引率して 豪華スーパーコピーブランドお楽しみください!弊社は個性あふれるブランドコピー、すばらしい デザインと高品質を兼ね備えるスーパーコピーバッグ、優雅の魅力があるのスーパーコピー財布など人気商品が続々入荷! http://www.newkakaku.com/cdq1.htm

    Comment by 非常に優美かつ独特で、ずっと優雅な姿で潮流の最高峰に立って、流行に引率して 豪華スーパーコピーブランドお楽しみください!弊社は個性あふれるブランドコピー、すばらしい デザイ at 4:44 pm on March 9, 2016

  4. ブランドコピー時計 おかしいことは、すなわち、ので、私はまだ映画を見ていないと映画でありません特に習慣を着てwatneyの腕時計の説明から入手可能である(彼は宇宙服を着ていないとき)私はこのカーキネイビー腕時計は、映画の中でどのように突出したか本当にわかりません。しかし、私はそれをいくつかの良いスクリーン時間を得ます。ハミルトンは、マット・デイモンは、映画の中の時計を着用することを本当に確認しました。 http://www.gginza.com/%E6%99%82%E8%A8%88/%E3%83%AD%E3%83%AC%E3%83%83%E3%82%AF%E3%82%B9/daytona/07a18fdca7e3553b.html

    Comment by ブランドコピー時計 おかしいことは、すなわち、ので、私はまだ映画を見ていないと映画でありません特に習慣を着てwatneyの腕時計の説明から入手可能である(彼は宇宙服を着ていないと at 4:49 pm on March 9, 2016

  5. あなたはもう一つのすばらしい新しいtxの腕時計を探している。これは、500系ワールドタイムモデルの一部ともう少し洗練されたスタイルに関しては、外向的なモデルより。また、この新しいモデルであるので、私は正確なモデル番号がありません。背景には、世界地図の青白に対しては本当に素晴らしく見えた新しいレトロな観察を得ます。私は、腕時計は、永久カレンダーと思っていると、表示の第2タイムゾーンの半球シーズン(冬または夏)とデート。腕時計の主要な焦点は、世界時の合併症である。あなたができる赤い「t」の手を見る周りにダイヤルすることができます基準都市を通してのタイムゾーンを選択します。これは、逆行性24時間ダイヤル10時近くに位置する時間が変化する。主な時間腕時計のダイヤルの上に表示されます。オリス偽物激安通販あなたはユニークなルックスと使う楽しみです本当に便利なワールドタイムの時計を持っていた。時計の結晶鉱物の結晶の上に実際に結合したサファイアである。少しより高価にするよりも、すべてのサファイアクリスタルがサファイア結晶の利益のほとんど。また、結晶の丸い端とケースから上がっている触発レトロです。この新しい500シリーズワールドタイムウォッチの最良の部分は、新しいブレスレットです。金属製のブレスレットが出てかなり醜い。このハンサムなそのスタイルはほぼジュビリーブレスレットをしている。私はこの多くの腕時計が好きだったと思います、それは良い売り手ですまた、良い贈り物を見てください。価格の可能性が500ドルのこの腕時計のためである。 http://www.ooobag.com/wallet/louisvuitton/index_11.html

    Comment by あなたはもう一つのすばらしい新しいtxの腕時計を探している。これは、500系ワールドタイムモデルの一部ともう少し洗練されたスタイルに関しては、外向的なモデルより。また、この新し at 4:50 pm on March 9, 2016

  6. ブルガリLVCEAシリーズ計12種類の風格:両方の経典の精鋼項は、贅沢な密镶钻バラの金金。この多元シリーズも含めて多くの精鋼とバラの金金バランス表。違う表項もダイヤモンドの輝き輝きや真珠母貝の柔らかな美しさを見せている貴重な質感で。IWCコピー時計他の表の縁取りローマ数字はXIIビィーを見せていると、蘊はブルガリ血統の古ローマ元素。細部の小さな差が発生的な視覚悪くて、私が三項の腕時計抜群。 http://www.ooobrand.com/bags/hermes/642.html

    Comment by ブルガリLVCEAシリーズ計12種類の風格:両方の経典の精鋼項は、贅沢な密镶钻バラの金金。この多元シリーズも含めて多くの精鋼とバラの金金バランス表。違う表項もダイヤモンドの輝き輝 at 4:51 pm on March 9, 2016

  7. 今年は実力で優勝したチームはたくさん本を含め、アイルランド隊。ヨーロッパツアー第2位の罗里・マイクロイ(Rory McIlroy)が今年は格莱姆・麦克道尔(Graeme McDowell)コンビ代表アイルランド出陣。20歳の罗里・マイクロイは現在、世界ランキング10位。 http://www.gowatchs.com/brand-233.html

    Comment by 今年は実力で優勝したチームはたくさん本を含め、アイルランド隊。ヨーロッパツアー第2位の罗里・マイクロイ(Rory McIlroy)が今年は格莱姆・麦克道尔(Graeme McDowell)コンビ代表アイルラ at 4:51 pm on March 9, 2016

  8. の原則は原則の詩と経済学の原則で、第2の「等価。ここでは、まあposited実用方程式の間です。「いい」、「次」と「既成事実」。PAS(良いと深刻な自制、自制、自制)。」準配備本もろくて弱い経済方程式、探求の境界の間の過程と製品、成功と失敗、天才と。ロレックス 時計コピー「なくて、私達のここだけの話しましょう、私達に引き続き気づいた、このタイプの反復件1。 http://www.newkakaku.com/gab7.htm

    Comment by の原則は原則の詩と経済学の原則で、第2の「等価。ここでは、まあposited実用方程式の間です。「いい」、「次」と「既成事実」。PAS(良いと深刻な自制、自制、自制)。」準配備本もろく at 4:52 pm on March 9, 2016

  9. 当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安!ブライトリングコピー,代引きなどの商品や情報が満載!全商品写真は100%実物撮影です! お客様の満足度は業界No.1です!スーパーコピー時計,時計コピー ,ブランド時計コピー販売(n級品)店舗 ブランド腕時計(ロレックス,ブライトリング,タグホイヤー,オメガ,ガガミラノなど)の最新 情報やイベントを紹介する正規販売店と腕時計コピーの専門サイトです。当店はロレックスやパテックフィリップなどの新品スーパーコピー時計の販売と。 http://www.newkakaku.com/l12.htm

    Comment by 当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安!ブライトリングコピー,代引きなどの商品や情報 at 4:52 pm on March 9, 2016

  10. 紹介によると、赫柏林このブランドはいま家族の第3世代の人が経営、赫柏林表も外観デザインや品質の上で、すべて持ってフランスロマンチックと繊細な性格。設計上のオリジナリティも比較的地味、線は優雅な。このブランドの品質について、肖晓もまた、「彼らの品質も守って家族の使命感、利益と家族の栄誉感の選択の中で彼らに後者より。」 http://www.fujisanbrand.com/watch/bvlgari/index_3.html

    Comment by 紹介によると、赫柏林このブランドはいま家族の第3世代の人が経営、赫柏林表も外観デザインや品質の上で、すべて持ってフランスロマンチックと繊細な性格。設計上のオリジナリティも at 4:52 pm on March 9, 2016

  11. Subject: img tags broken
    Follow-up to my Feb 19, 2016 post. Thanks to some discussions with others, it seems the problem is that Google has started intercepting the img tags for tracking purposes, and our unsupported inclusion of img in the event description are an unintended victim. However, here’s a work-around–slightly limited and not very user friendly for sure, but better than nothing.

    To insert a small www x hhh image floating to the right of your event descriptions, previously we could use a straightforward img tag, like this:

    Now, Google corrupts the img tag and the link is broken (no image displays in the event). But you can replace the img tag with something like this (all on one line, no breaks):

    Caveat: the image file (http://server/xyz.jpg) must now be ***pre-sized to www x hhh.*** This “background url” method will not shrink large images.

    The floating div is only necessary to have the event description text wrap around a small image (less than ~275 px event description text). This works well for a small logo, for example. Without the outer div, the inner div will will simply display the image in line. Hope this helps someone.

    It would be great if we could make gcalender-wrapper not only intercept Google’s CSS, but also intercept Google’s corruption of tags, and restore the img URL so the images displayed as before. Can you help?

    Comment by John C at 5:15 pm on March 14, 2016

  12. Subject: img tags broken (re-post to fix lost formatting)
    Follow-up to my Feb 19, 2016 post. Thanks to some discussions with others, it seems the problem is that Google has started intercepting the img tags for tracking purposes, and our unsupported inclusion of img in the event description are an unintended victim. However, here’s a work-around–slightly limited and not very user friendly for sure, but better than nothing.

    To insert a small www x hhh image floating to the right of your event descriptions, previously we could use a straightforward img tag, like this (replace brackets with the correct html symbols):
    [img src=”http://xyz.jpg” width=www height=hhh align=right]

    Now, Google corrupts the img tag and the link is broken (no image displays in the event). But you can replace the img tag with something like this (all on one line, no breaks):
    [div style=”float:right; width:125px;”]
    [div style=”background: url(IMAGE URL GOES HERE) no-repeat; height: 125px;”]
    [/div][/div]

    Caveat: the image file (http://server/xyz.jpg) must now be ***pre-sized to www x hhh.*** This “background url” method will not shrink large images.

    The floating div is only necessary to have the event description text wrap around a small image (less than ~275 px event description text). This works well for a small logo, for example. Without the outer div, the inner div will will simply display the image in line. Hope this helps someone.

    It would be great if we could make gcalender-wrapper not only intercept Google’s CSS, but also intercept Google’s corruption of tags, and restore the img URL so the images displayed as before. Can you help?

    Comment by John C at 5:19 pm on March 14, 2016

  13. This is a really neat solution, thanks!

    You can also add some similar logic to this caching method: https://www.addedbytes.com/articles/for-beginners/output-caching-for-beginners/

    (you don’t really need output buffering for this case)

    Comment by Daniel at 2:39 am on March 22, 2016

  14. Training” could be repeated indefinitely, to comp stomp”
    an AI opponent along with your latest methods.

    Once you join a clan you too can initiate a Friendly Battle”, even against considerably harder clan mates to get feedback on your deck and method.
    Finally, TV Royale” is a kind of best of” replay of largely excessive stage match ups.

    Comment by Cristina at 12:28 pm on May 21, 2016

Leave a comment

TrackBack URI

Unitz LLC, 850 North Randolph St., Suite 103 - A38, Arlington, VA  22203 * Tel. 703-539-2542 Email us