ホームページにGoogleカレンダーを埋め込んで「予定ごとに色分けしたい！」と思って設定してみたのに、なぜか全部同じ色で表示されてしまう…よくあるミスを抑えながら解説します。
普通に色をつけるだけでは反映されません
Googleカレンダー上で予定に色をつけても、埋め込んだときには反映されず、すべて同じ色で表示されてしまいます。これは、予定に色をつけても「カレンダーそのもの」が分かれていないためです。
マイカレンダーを複数作成しよう
予定ごとの色分けをしたい場合は、「マイカレンダー」を複数作成する必要があります。
手順
新しいカレンダーを作る
Googleカレンダー左側の「他のカレンダー」横の「＋」をクリックします
「新しいカレンダーを作成」をクリックします
名前をつけて「カレンダーを作成」をクリックします
カレンダーの色を設定
カレンダーの色を設定します。
カレンダーの名称の横の縦「・・・」をクリックすると色が表示されますので、そこで色を選びます。
予定を登録する
予定を追加するときは、どのカレンダーに登録するかをしっかり選ぶことが重要です。
色分けをするということは複数のカレンダーができるということですので、必ずカレンダーを選ぶようにしましょう。
公開したい全てのカレンダーの公開設定を変更する
予定が登録できたら、いよいよ埋め込みの準備です。
まず、埋め込み予定のカレンダーの名称の右にある縦「・・・」をクリックします
「設定と共有」をクリックします
「予定のアクセス権限」があるので
青くチェックがつけばOKです
これを公開したい全てのカレンダーひとつひとつに行います。
一つでも公開設定が一般公開されていないとバグが起きますので注意してください。
複数のカレンダーを統合して、埋め込みコードを取得する
カレンダーを色分けしても、埋め込みコードを1つのカレンダーからだけコピーしてしまうと、1色しか表示されません。
必ずカレンダーの統合からコードを取得しましょう。
表示したいカレンダーのどれか一つの名称の横にある縦「・・・」をクリックします。
「設定と共有」をクリックします。
左のメニュー「カレンダーの統合」をクリック、右の「カスタマイズ」をクリックします。
カレンダーの埋め込みプレビューが表示されますので、一番下までスクロールして、埋め込みに表示したいカレンダーを全て選びます。
カレンダーに予定が表示されているのを確認し、右上のコピーボタンをクリックしコードをコピー。
コードをホームページソースに貼り付けます。
よくあるミスまとめ
- 予定の公開設定をしていない → 予定が表示されない
- カレンダーを統合せず、1つだけ埋め込んでしまう → 色が反映されない
