GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2015.01.09

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

サリー

gcalendar-wrapper.phpの使い方

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

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

「Download the wrapper script」のリンクをクリック width=

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

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

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

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

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

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

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

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

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

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

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

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