GoogleカレンダーをWEBサイトに表示する方法

Googleカレンダーをサイトに埋め込む

まずはGoogleカレンダーのサイトにアクセスします。
＊Googleカレンダー

既存のGoogleアカウントを使うなり、新規アカウントを作成するなりしてログインします。

Googleカレンダー右上の「歯車アイコン」をクリックし、表示されたダイアログの中から「設定」をクリックします。

カレンダー設定画面の「カレンダー」の部分をクリックします。

WEBサイトに埋め込みたいカレンダー名をクリックします。
デフォルトの場合、ご自分のアカウント名のついたカレンダーのみなので、それをクリックします。

詳細画面・カレンダーの情報欄の左下「共有設定を変更」をクリック。

「このカレンダーを一般公開する」にチェックを入れ、保存をクリックします。
この時、警告画面が表示されますが、かまわず保存します。

もう一度、設定から詳細画面・カレンダーの情報欄に戻ります。
その右下にコードが表示されています。
これをWEBサイトの埋め込みたい箇所にコピペしてください。

するとWEBサイト上にGoogleカレンダーが表示されます↓

色・サイズ・表示パターンの調整

表示するカレンダーは、色・サイズ・表示パターンを調整することも可能です。

詳細画面・カレンダーの情報欄の右下、「色やサイズなどをカスタマイズします」をクリックしてください。

この設定画面から各種の調整ができます。
右下のカレンダーを見ながらいろいろといじってみてください。
埋め込むコードもそれに応じて変化していきます

レスポンシブデザインへの対応

レスポンシブWEBデザインの場合、このままだとGoogleカレンダーはタブレットやスマフォ表示に対応してません。
画面幅に応じてカレンダーが縮小されない状態です。

これの解消方法は各WEBサイトの構造ごとに違うと思いますが、当ブログの場合は以下のようなコードを使ってます。

HTML

<div class="google-cal">
    <iframe src="https://calendar.google.com/calendar/........." style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

CSS

/* Googleカレンダー */  

.google-cal {
    text-align:center;
    } 

.google-cal iframe {
    width:98%;
    height:600px;
    } 
    
@media (min-width: 768px) {
    
.google-cal {
    text-align:left;
    }  
    
.google-cal iframe {
    width:90%;
    }  
    
    }     

Googleカレンダーのiframeタグを、class「google-cal」で囲みます。

CSSでiframeタグのwidthをパーセント記述にして、親要素に対する幅を画面幅に応じて可変状態にします。