Googleカレンダーのデザインをカスタマイズして埋め込む方法

こんにちは、デザイナーのサリーです。

LIGが運営するシェアオフィス「いいオフィス」では連日イベントが行われており、お客様からイベントに関するお問い合わせも多く頂くようになりました。

そこで、いいオフィスサイトにイベントカレンダーを表示しよう！ということに。

しかし、Googleカレンダーのデザインが、サイトのデザインに合わなかったんです(´･_･`)

Googleカレンダーは2011年に新しいデザインになりましたが、埋め込むときは青い枠のついた旧デザインしか選べません。あまり時間もかけられないし、難しいことはせずCSSだけ上書きしたい……。

何かいい方法はないかググってみたところ、「gcalendar-wrapper.php」というスクリプトを見つけたので使ってみたら、まさに求めていた挙動を実現できました！
今回は、gcalendar-wrapper.phpの使い方についてご紹介します。

gcalendar-wrapper.phpの使い方

1. gcalendar-wrapper.phpをダウンロードする

公式サイトよりgcalendar-wrapper.phpをダウンロードします。
http://www.unitz.com/u-notez/2009/04/color-customization-for-embedded-google-calendars/

「Installation and Usage」の手順2にある「Download the wrapper script」のリンクをクリックしてZIPファイルを落とします。

2. gcalendar-wrapper.phpを編集する

gcalendar-wrapper.phpを編集して、カレンダーのデザインを選びます。
この編集作業が肝なので、詳しくは後述します！

3. Googleカレンダーの埋め込みコードを取得する

通常通り、カレンダーの埋め込み用のiframeコードを取得します。

こちらのやり方の詳細は公式のヘルプをご覧ください。
https://support.google.com/calendar/answer/41207?hl=ja

4. 埋め込みコードを編集する

取得したGoogleカレンダーのコードを少し編集します。

<iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=xxxxxxxxx&amp;color=%23711616&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

このコードの中の「https://www.google.com/calendar/embed」を、「gcalendar-wrapper.php」までのパスに書き換えます。

<!-- 変更例 -->
<iframe src="script/gcalendar-wrapper.php?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=xxxxxxxxx&amp;color=%23711616&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

5. ファイルをアップロードして完成

HTMLファイルの任意の場所に埋め込みコードを貼付け、gcalendar-wrapper.phpとHTMLファイルをアップロードして、無事デザインが変わっていたら完了です！

デザインのカスタマイズ方法

上記「2. gcalendar-wrapper.phpを編集する」の詳しい方法について説明します。
gcalendar-wrapper.phpを開くと、23～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

こちらがデフォルトで設定されているカラーです。
このカラーを変更することで背景色や文字色などをカスタマイズすることができます。
また、「Orange color scheme」「Purple color scheme」「Green color scheme」も用意されているので、コメントアウトの箇所を入れ替えれば簡単にカラースキームを変更することも。

▼ Orange color scheme

▼ Purple color scheme

▼ Green color scheme

でも、背景色や文字色を変えただけだとまだなんかイマイチ。と思ったら、直接CSSを追加してしまえばいいことが判明……！

これで文字サイズやボーダー色まで変えられる〜。というわけで、スキームをこんな風に書き換えました。

$calColorBgDark      = 'transparent';
$calColorTextOnDark  = '#615034';
$calColorBgLight     = '#fff';
$calColorTextOnLight = '#615034';
$calColorBgToday     = '#f3f3f3';
$calColorBgBody  = 'transparent'; 
$calColorBorder  = '#e8e8e8'; 
$calColorTh  = '#615034'; 
$calColorNonMonth  = '#bbb'; 
$calFont  = '"Trebuchet MS", Helvetica, sans-serif'; 

90行目くらいから下記のCSSを追加しました。

body {
	background-color:{$calColorBgBody} !important;
}
body,
#calendarTitle,
.calendar-container,
.te-t,
.st-c-pos {
	font-family:{$calFont};
}
.mv-event-container {
	border-top:none !important;
	border-bottom:1px solid {$calColorBorder} !important;
}
.st-bg-table {
	border-collapse: collapse;
}
.st-bg-table,
.st-bg-table th,
.st-bg-table td,
.st-bg-table td.st-bg,
.st-bg-table td.st-dtitle,
.st-grid td.st-dtitle {
	border:1px solid {$calColorBorder} !important;
	border-bottom: none !important;
}
.te {
	color:{$calColorTh} !important;
	padding:3px !important;
}
.calendar-nav {
	padding:0 5px !important;
}
.st-dtitle {
	font-size: 14px !important;
	padding:3px !important;
	font-weight:normal;
}
.st-dtitle-nonmonth span {
	color:{$calColorNonMonth} !important;
}
#calendarTitle {
	padding-left: 7px !important;
}
.today-button {
	margin:0 0 0 7px !important;
}
#container table.mv-daynames-table,
#container td#calendarTabs1 div.ui-rtsr-unselected {
	background-color:{$calColorTh} !important;
	color:#fff !important;
}
body #container td.st-dtitle-today,
body #container td.st-bg st-bg-today {
	background-color:{$calColorBgToday} !important;
}
#container td.st-dtitle {
	background-color:#fff !important;
}
.st-grid {
	border-collapse: collapse !important;
}
#calendarTabs1 table {
	margin:0 6px 0 0;
}
img:focus {
	outline:none !important;
}
.t1-embed,
.t2-embed {
	display:none !important;
}

そして完成したデザインがこちらです！

https://iioffice.liginc.co.jp/

まとめ

完全なカスタマイズとまではいきませんが、ある程度デザインをサイトに合わせて整えることができました。
小難しい操作がなく、手軽に使えるところがいいですね。
お試しくださいませ！

 

【カレンダーのいろいろ】

※ 「Googleカレンダー」に便利なChrome拡張機能4選

※ iCalをもっと便利に！iCalに祝日と天気を表示させる方法

※ 基本から学べる！Excelで万年カレンダーを作成する方法

※ スケジュール作成を簡単に！無料ツールのGantterを使ってみた

※ スケジュール管理にオススメ！デザインやアイコンが可愛いカレンダーアプリまとめ10選