カレンダーをウェブサイトに埋め込んでレスポンシブ対応にする方法のメモ。取得してすでにカレンダーを利用していることを前提。カレンダーにログイン(下の画像)右上の歯車のような(設定の)アイコンをクリックして「設定」を選択(下の画像)以下のような画面が表示される。左上の「カレンダー」のタブをクリック。(上の画像)カレンダーを誰でも閲覧できるようにするには、カレンダーを一般公開する必要があるので、(上の画像)「共有」の下の「このカレンダーを共有」をクリックして、表示される画面(下の画像)で「このカレンダーを一般公開する」にチェックを入れて保存(詳細を非表示にするにはその下のチェックボックスにもチェックを入れる)。カレンダー埋め込み支援ツール」が表示されるので、以下の項目を設定。カレンダーの枠の色などの指定はできないみたい(そのためのプラグインはある)。更新する」をクリックして、その下のコードをコピーして、カレンダーを表示するページに貼り付ける。以下の方法では、スマートフォンで見た場合、カレンダーの右側の一部が表示されないとの指摘を受けて確認したところ、確かに土曜日の一部と日曜日の部分が表示されていない。対応に」を参照ください。要素で囲む必要がある。要素に「cal_wrapper」と「googlecal」というクラスを指定(何でも良い)。要素のクラスを使って以下のようにスタイルを指定。パディングやマージン、最大幅、縦横比などはサイトのデザイン等によって調整。以上では縦横比を「3:4」、600px未満では「3:3」にする例。見てみると以下のように表示されてしまっていた。不思議なことに(?)少しずつ縦方向に長くなっていくのを確認。以下のサイトを参考に少しカスタマイズしたところ、なんとか全体が表示されるようになった。(但し、縦横比をうまく調節できないが。以下)は「.small-container」を表示する場合の例。必要に応じてブレークポイントの値を変更したり、さらに別のブレークポイントを設ければいいかと思う。属性内の「embed?」を「htmlembed?」に変更する必要がある。要素「gc_wrapper」はそのサイトのデザインに合わせて適宜変更。ブレークポイントにより、「big-container」と「small-container」は表示・非表示に設定。}}この方法だと以下のように表示される。使っているなら、以下のようなカレンダーのプラグインの方が扱いやすいかと思う。