極意(34)Googleカレンダーをレスポンシブにする

近々のユーザーフォーラムでの話です。

ある方がGoogleカレンダーをスマフォで見た際、レスポンシブになっていないので、なんとかレスポンシブにする方法は無いものかと質問して来られました。確かに従来のGoogleカレンダーの埋め込みコードによるWebページへの貼り付けではレスポンシブになっていません。

そこで筆者の回答例として、レスポンシブの設定をした表を用意して、その表のセル内に#html2( ) の形式でGoogleカレンダーを埋め込んだらどうかと回答しましたが、質問者は納得できなかったみたいで、実際にレスポンシブなGoogleカレンダーを実現できているサイトを紹介して、このようにしたいんだと訴えてきました。

そこでもう一人の回答者の方から、こう言う方法があるとの回答を戴きました。それはGoogleカレンダーには「埋め込みコード」の他に「カレンダーのアドレス(URL)」というものがあり、それを使用するとレスポンシブ化が実現できると言う貴重な情報を戴きました。筆者も知らなかったことで正に「目から鱗」でした。

早速、実際に試してみた結果をご披露致します。それにしても、またユーザーフォーラムの皆さんに助けられた思いがあり感謝感謝の連続です。


以下が実際にレスポンシブを実現できているカレンダーです。



[check]上記のおまじないです。

#iframe("https://calendar.google.com/calendar/embed?src=mo.ri.sa.ki.hi.to.shi%40gmail.com&ctz=Asia/Tokyo",500,100%)



[check]ちなみに従来の埋め込みコードでのおまじないです。

#html{{
<iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=mo.ri.sa.ki.hi.to.shi%40gmail.com&amp;color=%236B3304&amp;ctz=Asia%2FTokyo" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
}}



[check]解説します。
最初のおまじないが、今回のレスポンシブ・カレンダーを実現するカレンダーのアドレス(URL)を、#iframeプラグインに挿入した結果です。
二番目のおまじないが、Googleカレンダーの埋め込みコードを#htmlタグに挿入した結果ですが、レスポンシブにはなっていません。



カレンダーのアドレスの取得手順

カレンダーの設定画面(下記)でHTMLボタンを押します。
画像の説明


ポップアップされたカレンダーのアドレス画面より、赤枠で囲われたURLを#iframeプラグインに挿入します。
画像の説明


その他、Googleカレンダーの設定は以下を参照



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 3  
    役に立たなかった 0  


ご意見箱