埋め込んだgoogleカレンダーのデザインを変更できる「gcalendar-wrapper.php」の使い方

先日制作した伊豆大島のゲストハウスhorizonでも使用した、埋め込みgoogleカレンダー。
こちら簡単にサイトに埋め込む事が出来ますが、デザインの自由度は低いと言わざるを得ません。

そんな埋め込みgoogleカレンダーのデザインを自由に変更できるのが「gcalendar-wrapper.php」というスクリプトです。ここではgcalendar-wrapper.phpの使い方などを紹介します。

gcalendar-wrapper.phpのダウンロード

以下のサイトよりダウンロードできます。ページ中程にある「Download the wrapper script」をクリックしてファイルを保存してください。

ダウンロードしたファイルを解凍し、サーバーにアップロード

ダウンロードしたファイルを解凍すると「gcalendar-wrapper.php」が出てきますので、それをサーバーの任意の場所にアップロードします。wordpressの場合などはテーマディレクトリに一緒にアップしておくと良いと思います。

googleカレンダーの準備

公開用googleカレンダーを用意します。ここではサンプルとして「予約管理」というカレンダーを用意しました。

公開設定をしておく

一般公開するので、設定から共有設定を行っておきます。「アクセス権限」から「一般公開して誰でも利用できるようにする」にチェックを入れます。

googleカレンダーの埋め込みコードを取得

「Google カレンダー埋め込み支援ツール」などを利用して埋め込みコードを取得します。
この時点で「印刷アイコン」など不要な項目があればチェックを外しておくと、後々のカスタマイズもやりやすくなります。

埋め込みコードの編集

取得したコードを編集します。デフォルトではhttps://www.google.com/calendar/embedから始まっていますが、これをgcalendar-wrapper.phpへのパスに変更します。

<iframe src="ttps://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=xxxxxxxxxx&color=%23182C57" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
<iframe src="ドメイン/gcalendar-wrapper.php?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=xxxxxxxxxx&color=%23182C57" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

wordpressの場合

テーマディレクトリにgcalendar-wrapper.phpを置き、

<iframe src="<?php echo get_template_directory_uri(); ?>/gcalendar-wrapper.php?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=xxxxxxxxxx&color=%23182C57" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

とすれば出来ると思います。

デザインの変更

デザインを変更するには、gcalendar-wrapper.phpを編集します。gcalendar-wrapper.phpの26〜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

また、プリセットとして幾つかカラースキームが用意されているのでそちらを使うことも出来ます。
試しに36〜40行にある「Orange color scheme」のコメントを外し、適用させてみたものが以下の通りです。

もっと凝ったデザインの変更

上記で紹介した方法を使ってデザインを変更しても枠の色が変えられるだけで、正直あまり良いデザインにはなりません・・・。ではどうすればもっと凝ったデザイン出来るかと言うと、実は上記で設定したカラーコード達は、gcalendar-wrapper.phpの87〜182行目にあるcss設定の変数として定義されています。なので上記を使わず、もう直接cssを書き込んでいけばもっと柔軟なデザイン変更が可能になります。

実際にもっとスッキリしたものにしてみた

cssを色々と追記して作ってみたのが以下のカレンダーです。まだまだ余白など気になる点はありますが、ここまで出来ればサイトの雰囲気にもあったものになるのではないかと思います。

追記したcssです。

table.mv-daynames-table {
	background: #FFF !important;
}

td.st-dtitle {
	background: #FFF !important;
	border: 1px solid #000 !important;
	border-bottom: none !important;
}

td.st-dtitle.st-dtitle-today {
	background: #F0F0F0 !important;
}

.st-bg-table {
	border-collapse: collapse;
}

.st-grid {
    border-collapse: collapse !important;
}

.view-cap {
	display: none !important;
}

.mv-event-container {
	border: none;
}

.rb-n {
	background: #000 !important;
}

.view-container-border {
	padding: 0 !important;
}

td.st-bg {
	border: 1px solid #000 !important;
}

td.st-bg-today {
	background: #F0F0F0 !important;
}

.footer {
	display: none;
}

一手間をかけるだけでデザインがグッと良くなるので、ぜひお試しください。