Googleカレンダーをレスポンシブに表示させる

せっかくレスポンシブデザインのAmeba Owndで作成しているので、埋め込んだGoogleカレンダーも、レスポンシブに対応させたい（端末の幅に応じて、いい感じにフィットして表示させたい！）という方へ。

※ Google公式の埋め込み方法ではないため、Google Calendarの仕様変更などにより使えなくなる可能性があります。

基本的なGoogleカレンダーの埋め込み方法については下記記事を参考にしてください。

今回は、上記で使う埋め込み用HTMLは使わず、Googleカレンダーが発行する、カレンダーIDを用います。

カレンダーIDは、Google Calendarの設定ページの [カレンダーのアドレス] という箇所に表示されているものです。

カレンダーを埋め込みたい箇所にHTMLブロックを挿入し、下記のCode Penの内容を貼り付けます。

下記のように、calendarUrlの太字の箇所のところを、貼り付けたいカレンダーのIDに書き換えて保存します。

var calendarUrl = "exmaples＠group.calendar.google.com";

これで設置は完了です。

必要に応じて、 [showTitle] や [pcWidth] や [pcHeight] の値を調整しても良いかもしれませんね。

出来上がりのイメージ

幅が広いPCでの表示

スマートフォンでの表示