「ホームページに埋め込んだGoogleカレンダーを予定ごとで色分けしたい！」そういった考えをお持ちの方がいるのではないでしょうか。

当社で制作したホームページでも、お店の休業日やイベント情報、お知らせなど、お客様でも簡単に更新ができるようGoogleカレンダーを活用することがあります。

そしてお客様から

「カレンダーの予定の色を変えたのに変わっていない。」

「予定ごとで色分けをしたいのだが、やり方がわからない。」

といったお問合せをいただくことがあります。

 

そこで今回はその方法をご紹介したいと思います。

埋め込みGoogleカレンダーを色分けする方法

では早速、色分けしたGoogleカレンダーの埋め込み方法をご紹介します。以下の通りです。

 

1．新しいカレンダーを追加する。

左下の「ボタン」にカーソルを合わせ、「他のカレンダーを追加」をクリックした後、「新しいカレンダーを作成」をクリックします。

カレンダーの名前を入力し、「カレンダーを作成」をクリックします。（今回はテストカレンダーとテストカレンダー2とします。）

※色分けしたい数のカレンダーを作成します。（3色で分けたいなら3つ作成します。）

その後、カレンダーの色を設定します。色を変更したいカレンダーにカーソルを合わせ、「オーバーフローメニュー」をクリックすると色を変更できます。

2．カレンダーの設定

マイカレンダーの設定で表示したいカレンダーをクリックし、予定アクセス権限の「一般公開して誰でも利用できるようにする」にチェックします。（一般公開しないとそのカレンダーの予定をホームページに表示することができません。表示したいカレンダー全てにチェックを入れてください。）

3．カレンダーの統合・カスタマイズ

スクロールしてカレンダーの統合の「カスタマイズ」をクリックします。
スクロールすると左下に表示するカレンダーが選択できるので、表示させたいカレンダーにチェックを入れます。

4．埋め込みコードを取得する

色やその他の設定が完了したらカレンダー上部の埋め込みコードをコピーします。
このコードが予定ごとで色分けできるカレンダーの埋め込みコードとなっており、このコードをホームページへ埋め込めば反映完了です！

なんで予定の色変更で色が変わらないの？

ホームページに埋め込んだカレンダーは予定の色ではなく、カレンダー自体の色が反映される仕様となっております。そのため、予定の色を変えて登録したとしてもそれが全て同じカレンダーに登録しているのであれば、全ての予定が同じ色で表示されてしまうのです。

あらかじめカレンダーを色分けして表示したいのならば、カレンダーを複数作りカレンダー自体の色を変更して管理しましょう。

まとめ

いかがだったでしょうか。

埋め込む前に色々と設定することによりカレンダーを色分けすることができました。ホームページへgoogleカレンダーを埋め込む際には、この記事を思い出していただければ幸いです！