複数のカレンダーを色分けして、1つのスケジュールとして「Googleカレンダー」をホームページに表示する方法
「お客様へのお知らせ」、「イベントカレンダー」、「予約スケジュール」など、複数の種類の予定をまとめてWebページに表示したいというご相談をいただくことがあります。
そんなときに便利なのが、Googleカレンダーの「複数カレンダー埋め込み」機能です。
今回は、カレンダーを分けて予定を管理しつつ、Web上ではひとつのスケジュール表として色分け表示する方法をご紹介します。
※こちらのカレンダーでは2種類のカレンダーの予定を同時に表示しています。
複数カレンダー表示のメリット
- 全体の予定が一目で把握できる
複数の予定をひとつの画面で確認できるため、「何がいつあるか」が一目でわかります。たとえば、「定休日」「イベント」「予約状況」などを同時にチェック可能です。 - カレンダーごとに色分けできて視認性アップ
Googleカレンダーではカレンダーごとに色分けできるため、情報の種類ごとに区別しやすく、混乱を防げます。 - 情報の整理・管理がしやすい
カテゴリ（例：「社内用」「お知らせ用」「イベント用」）ごとにカレンダーを分けておけば、管理者側も編集・更新がしやすくなります。 - 特定の情報だけを表示・非表示にできる
必要に応じて、特定のカレンダーだけを一時的に非表示にすることも可能。閲覧者側も自分が見たい情報だけを選んで見ることができます。 - 複数の担当者で分担管理が可能
例えば、部署や担当者ごとに別のカレンダーを持たせておけば、それぞれが自分の担当分だけを更新できるようになり、情報更新の効率がアップします。 - ホームページへの反映がリアルタイム
複数カレンダーの情報を統合して表示しても、各カレンダーの更新がそのままリアルタイムにWebページに反映されるので、反映ミスの心配も少なくなります。
設定手順
① 複数のカレンダーを作成
Googleカレンダー（https://calendar.google.com/）で、用途ごとにカレンダーを分けて作成します。
（例：「イベント用」「予約用」「スタッフ予定」など）
② 各カレンダーを「公開」状態にする
- カレンダーの設定を開く
- 「アクセス権の設定」で「一般公開する」にチェック
- 「統合」セクションにあるカレンダーIDをそれぞれ次の工程でコピペします
③ HTMLに埋め込む
次に、複数のカレンダーを1つのiframeで埋め込むためのコードを作成します。
<Ｉframe src="https://calendar.google.com/calendar/embed?src=※表示させたいスケジュール１のＩＤ%40group.calendar.google.com&src=表示させたいスケジュール２のＩＤ%40group.calendar.google.com&color=%23※スケジュール１の●のカラーコード（＃なし）&color=%23※スケジュール２の●のカラーコード（＃なし）&ctz=Asia%2FTokyo&mode=AGENDA"
style="border: 0" width="700" height="670" frameborder="0" scrolling="no">※諸事情により先頭のＩは全角になっているので半角に修正してご利用ください…。
ポイント：
- src=を必要分追加することで、複数のカレンダーを同時表示させることができます。
- カラーコードは「&color=%23」の直後に#なしで表記。
- タイムゾーンは「ctz=Asia%2FTokyo」で日本時間に設定。
- 「&mode=AGENDA」を記述することでリスト形式で予定が表示されるようになります。
Googleカレンダーを使えば、色分けされた複数のスケジュールを見やすく整理してホームページに表示できます。
スマホから簡単に更新できるため、日々の管理もラクに。
「お知らせ」や「イベント情報」などを色分けして表示したい方にぴったりの方法です。
閲覧者はスケジュールを自分のカレンダーに簡単に追加することもできます。
導入サポートや設定代行も行っておりますので、お気軽にご相談ください！
