埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法|大阪のホームページ制作会社 SmileVision

社員ブログ 埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法

ども、こんにちは。開発部のいろはです!
Googleカレンダーはiframeでサイトへ簡単に埋め込むことができますが、
通常のカラーは水色となっており、サイトに合わせて見た目の色を変更したいことがあると思います。
そんな時に便利なのが「gcalendar-wrapper.php」という
簡単にテキストカラーや背景色などを変更出来るスクリプトです。
img1
元々はこんなデザインですが・・・
img2
見た目をこんなデザインに変更することができちゃいます!!
・・・ということで、今回はこのgcalendar-wrapper.phpの使い方についてご紹介いたします!

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

下記URLページの真ん中辺りにある「Download the wrapper script」をクリックします。
Easy Color Customization for Embedded Google Calendars

img3
—–2018.06.07追記—–
上記リンク先が変更されていたため、下記のURLよりダウンロードしてください
http://www.unitz.com/u-notez/2009/04/color-customization-for-embedded-google-calendars/
「このページは動作していません」とメッセージが表示される場合はVPN接続でアクセスします
※レンタルサーバーwpXではgcalendar-wrapper.phpは使用できないようです

使用方法

1:gcalendar-wrapper.phpの編集

ダウンロードしたファイルをを解凍し、
gcalendar-wrapper.phpをテキストエディタで開きます。
23〜30行目の”Set your color scheme below”を変更することで
カレンダーをお好みの色にチェンジすることができます!
img4
1. $calColorBgDark :背景色を変更します
2. $calColorTextOnDark :曜日の文字色を変更します
3. $calColorBgLight :各日にちの背景色を変更します
4. $calColorTextOnLight :各日にちの文字色を変更します
5. $calColorBgToday :当日の枠の色を変更します
img5
ファイルの編集後サーバーにgcalendar-wrapper.phpを設置します。
WordPressで使用する場合は下記ディレクトリに配置します。

2:Googleカレンダーの共有設定をする

Googleカレンダーの詳細ページに行き、
「このカレンダーを一般公開する」にチェックをします。
予定内容を公開せず、時間のみ表示したい場合は、
「予定の時間枠のみを一般に公開」を選択します。
チェックしたら保存をクリックします。
img4

3:埋め込みコードを取得する

Googleカレンダー埋め込み支援ツール(https://calendar.google.com/calendar/embedhelper)
などにアクセスして、埋め込みコードを取得します。
すると次のようなコードが表示されるかと思います。

この中の「src=”https://calender.google.com/calendar/embed?」 の部分を
「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換えます。
WordPressの場合はこのようになります。

 

4:そのほか(2018.08.16更新)

埋め込みのカレンダー内にsrcタグを埋め込むことで複数のカレンダー情報を表示させることができます。
例えばこんな感じ↓

ただし3つ以上のカレンダーを埋め込んだ場合、3つ目からはカレンダーのカラー変更は適応されなくなるのでご注意ください。

 
あとはこの埋め込みコードが入ったHTMLファイルをアップロードで完成です!
使ってみると雰囲気がガラッと変化するかもしれませんね!
お疲れ様でしたノシ

ABOUT ME
いろは
■部署 開発部 ■スペック(Level、身長、座高、属性、資格) 水属性(98℃) ■入社年 2017年 ■趣味 ごはん(つくる)、白と茶色模様の犬、ボウリング、ナワバリ争い(イカ)、8bit ■座右の銘 明けない夜はない ■ひとこと うどん >> そば > そうめん