未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

googleカレンダーがスマホ時にはみ出してしまう場合の対処法

Googleカレンダーのhtmlの埋め込みですが、レスポンシブ対応にさせる場合、カレンダーの設定によってはスマホ時に画面からカレンダーの右側がはみ出してしまいます。
はみ出してしまう原因はカレンダーの上部にある「印刷」や「月・週」の表示切り替えタブなので、スマホ時にこれらのタブを非表示にしてしまいましょう。


非表示にするには、「iframe」内のGoogleカレンダーのURLの最後に以下のパラメータを追加します。

&showPrint=0&showTabs=0

追加するとこういった形になります。

<iframe src="https://calendar.google.com/calendar/embed?src=xxxxxxxxxxxxxxxxxx.calendar.google.com&ctz=Asia%2FTokyo&showPrint=0&showTabs=0">