スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

GoogleカレンダーをWEBサイトに埋め込む方法の解説です。

店舗の予約状況などをサイト閲覧者に伝えるのにとても便利です。
内容を更新するとWEBサイト上のカレンダーにも変更が反映されます。

~ 目次 ~

  1. Googleカレンダーをサイトに埋め込む
  2. 色・サイズ・表示パターンの調整
  3. レスポンシブデザインへの対応

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

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

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

Googleアカウントログイン

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

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

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

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

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

WEBサイトに埋め込みたいカレンダー名をクリック

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

WEBサイトに埋め込みたいカレンダー名をクリック

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

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をパーセント記述にして、親要素に対する幅を画面幅に応じて可変状態にします。