埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

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

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

gcalendar-wrapper.phpを準備する

—–2019.02.20更新—–

オリジナルソースはunitz.com様より取得いたしました。
上記をコピーして「gcalendar-wrapper.php」という名前で保存します。

※レンタルサーバーwpXではgcalendar-wrapper.phpは使用できないようです

使用方法

1: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:そのほか(2019.02.14更新)

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

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

あわせて読みたい
埋め込み式のGoogleカレンダーのパラメーターをカスタマイズするども、こんにちは。開発部のいろはです(^^) Googleカレンダーはiframeで好きなページに埋め込むことができ、非常に簡単で...

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

ABOUT ME
いろは
いろは
2017年入社 開発部所属のいろはと申します! 当ブログではWordPressなどWEBに関するアイデアや応用例をを中心に発信して参ります。