Google カレンダーを任意の色に変更してWebページに埋め込むテクニック

公開

Webページ上に「Google カレンダー」を埋め込むと、スケジュールの公開・共有が手軽に行えるので便利かと思います。

埋め込みの際、「Google カレンダー埋め込み支援ツール」にて背景色の指定が可能ですが、背景色の指定を変更してもタイトルやカレンダーの表示を切り替えるインタフェース周辺のみしか適用されず、肝心のカレンダー部分はブルー系の配色のままです。

そこで、U-notez Blogの記事「Easy Color Customization for Embedded Google Calendars」で配布されているプログラムを利用し、カレンダー部分の配色を変更してWebページに埋め込む方法をご紹介します。

表示サンプル

通常の埋め込み時
Google カレンダー埋め込み支援ツールで出力した埋め込みコードを利用して埋め込んだカレンダーの表示例
プログラムを利用した埋め込み時
gcalendar-wrapper.phpを利用して埋め込んだカレンダーの表示例

埋め込み手順

  1. Google カレンダー埋め込み支援ツール（詳細はGoogleのヘルプ「ウェブサイトへの埋め込み」を参照）にて埋め込みコードを取得します。その際、背景色はデフォルト（白）のままにしておきます。
  2. gcalendar-wrapperをダウンロードします。
  3. ダウンロードしたファイルを解凍しgcalendar-wrapper.phpを開くと23行目から30行目で色の設定があるので、任意の色に書き換えます。 
    /**
 * Set your color scheme below
 */
$calColorBgDark = '#c3d9ff';	// 濃い方の背景色
$calColorTextOnDark = '#000000';	// 濃い背景色上のテキスト色（曜日・タイムゾーン）
$calColorBgLight = '#e8eef7';	// 薄い背景色（日付の背景）
$calColorTextOnLight = '#000000';	// 薄い背景色上のテキスト色（日付）
$calColorBgToday = '#ffffcc';	// 本日を表す背景色
  4. 埋め込みコード内にあるiframeのsrc属性値を次のように書き換えます。 
    <!-- 変更前 -->
src="https://www.google.com/calendar/b/0/embed?(Google カレンダー埋め込み支援ツールで出力した文字列)"

<!-- 変更後 -->
src="gcalendar-wrapper.php?(Google カレンダー埋め込み支援ツールで出力した文字列)"
  5. カレンダーを埋め込んだHTMLファイルとgcalendar-wrapper.phpをアップロードします。

表示期間変更ボタンの変更

先に紹介した手順で色の変更を行ってもカレンダーの表示期間を前後に操作するボタンはデフォルトの色のままです。これはGoogleのサーバーにアップロードされている画像を読み込む指定になっているためです。

これを変更するには、ボタン画像を用意し、gcalendar-wrapper.phpの116行目付近を下記スタイルを記述し、デフォルトのスタイリングを上書きします。画像のパスは絶対URIで指定して下さい。

.navBack{
background:url(http://（ドメイン）/images/btn_left.png) no-repeat left top !important;
}

.navForward{
background:url(http://（ドメイン）/images/btn_right.png) no-repeat left top !important;
}

/* week view */
  • GoogleのようにCSSスプライトを利用するとベターです。

表示サンプル

表示期間変更ボタン変更後の表示例

追記：IE9以上の表示不具合に関して（2012年6月12日）

「IE9以上で閲覧した際に直近の予定しか表示されない」という不具合があるようです。配布元で確認したところ、この問題はIEが搭載する互換性機能に関連しているようです。

具体的には、GoogleカレンダーのHTMLにはmeta要素でX-UA-CompatibleをIE=EmulateIE7と指定してあり、マークアップを勘案するとIE7標準モードで描画されることが期待されています。一方IE9以上では、"最上位のページが IE9 の標準モードで表示される場合、そのページに含まれるすべての IFrame が IE9 の標準モードで表示される"という仕様があり（詳細はMSDN Blogsへ）、X-UA-Compatibleの値にかかわらずIE9標準モードでレンダリングされることになります。その結果、不具合が生じるようです。

当面の回避策としては、本記事で紹介したPHPを利用してカレンダーを埋め込むページのhead内に、次のようにX-UA-Compatibleを設定する方法が挙げられます。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">