GoogleカレンダーをWebサイトに埋め込み表示する方法

Googleカレンダーに予定を登録しており、その予定をWebサイト上で共有したいケースもあるかと思います。

たとえば、お店を経営している方が、営業日や休業日、イベントの予定などをお知らせしたい場合です。

そのような場合、Googleカレンダーでは埋め込みコードを利用して、カレンダーを共有することができます。

今回はGoogleカレンダーをWebサイトに埋め込み表示する方法を解説します。

GoogleカレンダーをWebサイトに埋め込み表示する方法

GoogleカレンダーをWebサイトに埋め込み表示する手順は以下の通りです。

カレンダーの中に、その日の予約状況や開催予定イベントといった情報を表示させたい場合は、Googleカレンダーを埋め込む方法が便利です。

STEP. 1：新規カレンダーの作成

「他のカレンダーを追加」をクリックします。

「新しいカレンダーを作成」をクリックします。

カレンダーのタイトルや説明文、タイムゾーンを指定して「カレンダーを作成」をクリックします。

以上で、新しいGoogleカレンダーが追加されました。

STEP. 2：予約状況、イベント情報の登録

次に、新しく追加されたカレンダーに予約状況やイベント情報など、ユーザーに見せたい情報を追加しましょう。

まずは、新しく追加したカレンダー以外の予定は非表示にしておきます。

Googleカレンダーに新しい予定を追加する場合は、画面左上の「作成」をクリックします。

「予定」をクリックします。

タイトルや時間、場所や説明文を記載して「保存」をクリックします。

この際、作成した予定が、新しく作成したカレンダーと正しく紐付いているかを確認します。

以上で、Googleカレンダーに予定を追加できました。

STEP. 3：カレンダーの公開設定

続いて、カレンダーの公開設定を行いましょう。

カレンダー名の右側に表示されている縦三点メニュー（︙）をクリックします。

「設定と共有」をクリックします。

画面を下に少しスクロールすると「予定のアクセス権限」と書かれた箇所があるので、こちらで「一般公開して誰でも利用できるようにする」にチェックを入れます。

「OK」をクリックします。

これでGoogleカレンダーを一般公開できるようになりました。

なお、一般公開する内容も設定できます。ここでは「予定の表示（すべての予定の詳細）」にチェックを入れておきます。

「予定の表示（すべての予定の詳細）」とすると、予定のタイトル・位置情報・説明のすべての詳細が共有されるようになります。

一方、「予定の表示（時間枠のみ、詳細は非表示）」と設定している場合は、「予定あり」とだけ表示され、詳細は伏せられるようになります。

なお、「予定の表示（すべての予定の詳細）」としていても、予定の登録時に「非公開」として設定していると、その予定に関しては詳細を伏せて表示させることができます。

STEP. 4：カレンダー埋め込みコードの取得

最後に、カレンダーの埋め込みコードを取得しましょう。

カレンダー名の右側に表示されている縦三点メニュー（︙）をクリックします。

「設定と共有」をクリックします。

画面を下の方にスクロールすると「埋め込みコード」があるので、こちらをコピーします。

あとは表示させたい場所でコードをペーストすればOKです。

WordPressを使用している場合は、カスタムHTMLブロックを利用して埋め込みましょう。

参考：Googleカレンダーのデザインをカスタマイズする方法

Googleカレンダーの横幅や高さなど簡単なデザインのカスタマイズを行いたい場合は、埋め込みコード下の「カスタマイズ」から行えます。

そうすると以下の画面が表示されるので、ここから埋め込みカレンダーへの表示項目の絞り込みや、横幅や高さ、週の開始日等が指定できます。

参考：Googleカレンダーのレスポンシブ対応

親要素の横幅に合わせて縦横比率を保ったまま埋め込んだカレンダーが拡大・縮小されるようにしたい場合は、埋め込みコードを<div class=”responsive-calendar”></div>で囲いCSSを追記します。

<div class="responsive-calendar">
  <!-- Googleカレンダー埋め込みコード -->
</div>

.responsive-calendar iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
}

これで、aspect-ratio: 4/3としているので、縦横比率4対3を保ったまま、拡大・縮小されるようになります。

まとめ

今回は、GoogleカレンダーをWebサイトに埋め込み表示する方法を解説しました。

カレンダーの中に、その日の予約状況や開催予定イベントといった情報を表示させたい場合は、Googleカレンダーを埋め込む方法が便利です。

お店を経営している方で、営業日や休業日、イベントの予定などをお知らせしたい方は、ぜひGoogleカレンダーをWebサイトに埋め込む方法を検討してみて下さい。

今回は以上になります。最後までご覧頂き、ありがとうございました。