Googleカレンダーの埋め込みレスポンシブ対応について

Google カレンダーの予定をサイトに埋め込みたいという場合、スマホとデスクトップ両方のレスポンシブ対応が必要となります。

この記事では Google カレンダーのレスポンシブ対応の方法をご紹介します。
レスポンシブ対応でユーザーのカレンダー閲覧環境を改善してください。

埋め込みiframeタグをレスポンシブ対応クラスで囲む

Google カレンダーの埋め込みタグを、googleCalendar クラスで囲います。

<div class="googleCalendar">カレンダーiframe埋め込みコード</div>

レスポンシブ対応スタイルを追加

レスポンシブ対応のための CSS を追加してください。

<style>
.googleCalendar{
  position: relative;
  min-height: 740px;
  width: 100%;
  padding-bottom: 50%;
}

.googleCalendar iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

min-height の部分は、media-query などでモバイルとデスクトップで環境に合わせて調整すると良いでしょう。

参考

Googleカレンダー11変化！パラメータを変更して比較しました