サイトに埋め込んだGoogleカレンダーをCSSやJavaScriptで好き放題する方法について

GoogleカレンダーはWEBサイトに埋め込んで表示することが出来るのですが、いかにもGoogleといった見た目のウィジェットが埋め込まれるためサイトに馴染まない場合が多いです。埋め込み用のコードはカスタマイズが可能とはいえ、変更できるのは背景色だけなので多くの場合何の解決にもなりません。
この記事ではCSSとJavaScriptでGoogleカレンダーの見た目を変更する手順について記載します。最終的には上記画像のようなレベルでカスタマイズができます。

Contents

1 iframeのすり替えとCSSの差し込み
2 JavaScriptの差し込み
3 細々した事
- 3.1 予定リストの表示方法
4 他手法について
- 4.1 gcalendar-wrapper.php
- 4.2 FullCalendar
5 最後に

iframeのすり替えとCSSの差し込み

Googleカレンダーの埋め込み用コードはiframeを使用しています。この場合iframe内はGoogleのドメインなのでクロスドメインに該当し、iframe内から自サイトのドメインに存在するファイル（cssやjs）を参照することができません。
解決方法として、iframeで直接表示するのではなくPHPでGoogleカレンダーのソースを取得してheadにCSSファイルへのリンクを差し込み、それをiframe内で表示するようにします。
……そういう内容の記事がstackoverflowに投稿されているのでコードは下記リンクを参照してください。

Stack Overflow

How to apply CSS to iframe?

https://stackoverflow.com/a/12521755

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

これで基本的に問題ないのですが元々Googleのドメインで動作するはずだったカレンダーの生成コードが自サイトのドメインで動作するため、想定していないリンクが生成されます。具体的には「マイカレンダーにコピー」のリンクが「https://自サイトのドメイン/calendar/event?action=～」になったりします。
なのでウェブサーバーでリダイレクションしてあげます。

JavaScriptの差し込み

JavaScriptもCSSと同様にヘッダを書き換える形で差し込んでいきます。ただ、Googleカレンダー本体はiframe内でJavaScriptにより動的に読み込まれるため、カレンダーの読み込み後にJavaScriptが動作するようします。

細々した事

予定リストの表示方法

埋め込み用のコードではデフォルトの表示形式を指定でき、カレンダー以外にも予定リストを表示することができます（URIにmode=AGENDAというクエリが付与される）。しかし前述したPHPによるfile_get_contents()だと予定リストが表示されず、Googleのログイン画面が表示されます。
そのため、デフォルトの表示形式として予定リストを指定する場合、カレンダーの読み込み後にカレンダーのヘッダ部にある予定リストのタブに設定されているイベントを発火させます。