GoogleカレンダーはWEBサイトに埋め込んで表示することが出来るのですが、いかにもGoogleといった見た目のウィジェットが埋め込まれるためサイトに馴染まない場合が多いです。埋め込み用のコードはカスタマイズが可能とはいえ、変更できるのは背景色だけなので多くの場合何の解決にもなりません。
この記事ではCSSとJavaScriptでGoogleカレンダーの見た目を変更する手順について記載します。最終的には上記画像のようなレベルでカスタマイズができます。
Contents
iframeのすり替えとCSSの差し込み
Googleカレンダーの埋め込み用コードはiframeを使用しています。この場合iframe内はGoogleのドメインなのでクロスドメインに該当し、iframe内から自サイトのドメインに存在するファイル（cssやjs）を参照することができません。
解決方法として、iframeで直接表示するのではなくPHPでGoogleカレンダーのソースを取得してheadにCSSファイルへのリンクを差し込み、それをiframe内で表示するようにします。
……そういう内容の記事がstackoverflowに投稿されているのでコードは下記リンクを参照してください。
これで基本的に問題ないのですが元々Googleのドメインで動作するはずだったカレンダーの生成コードが自サイトのドメインで動作するため、想定していないリンクが生成されます。具体的には「マイ カレンダーにコピー」のリンクが「https://自サイトのドメイン/calendar/event?action=～」になったりします。
なのでウェブサーバーでリダイレクションしてあげます。
JavaScriptの差し込み
JavaScriptもCSSと同様にヘッダを書き換える形で差し込んでいきます。ただ、Googleカレンダー本体はiframe内でJavaScriptにより動的に読み込まれるため、カレンダーの読み込み後にJavaScriptが動作するようします。
細々した事
予定リストの表示方法
埋め込み用のコードではデフォルトの表示形式を指定でき、カレンダー以外にも予定リストを表示することができます（URIにmode=AGENDAというクエリが付与される）。しかし前述したPHPによるfile_get_contents()だと予定リストが表示されず、Googleのログイン画面が表示されます。
そのため、デフォルトの表示形式として予定リストを指定する場合、カレンダーの読み込み後にカレンダーのヘッダ部にある予定リストのタブに設定されているイベントを発火させます。
他手法について
他にも色々なカスタマイズ法があるので一応調べたものについて所感を書きます。
gcalendar-wrapper.php
ググると真っ先に出てくると思いますが2018年5月現在、配布サイトのリンクが切れているような……あとカスタマイズできる箇所があまりないのかなという印象です。
FullCalendar
ググるのが足りなくて後から知りました。めちゃくちゃ高性能みたいなので本格的に触るのであればコレでいいのかもしれないですね。APIからのアクセスなので今回紹介した手法みたいに下品ではないです。
最後に
想定されていないGoogleカレンダーの使い方だと思うのでご利用は各自の責任でお願いします。