クライアントのホームページ制作において、Googleカレンダーを埋め込みで活用するケースがあります。
直感的に確認でき、更新負担も少ないため、採用されることが多い方法です。
今回、複数の予定を色分けして視覚的に分かりやすく掲載することを目的に、Googleカレンダーを複数作成し、統合表示して利用しました。
しかし、実際に埋め込んでみると「予定あり」としか表示されず、色も丸だけという状態になりました。
その際に検証して分かった仕様を整理します。
1. 色分けは「複数カレンダーの統合」が必要
Googleカレンダーには予定ごとの色設定機能がありますが、これはログイン状態で閲覧している場合のみ反映されます。
ホームページ埋め込み時に色分けを維持するためには、予定の種類ごとにカレンダーを分け、それらを統合して表示する必要があります。
2. 予定名が表示されない原因は「公開設定」
複数カレンダーを埋め込む場合、そのうち1つでも以下の設定になっていると、以下のように全体が制限表示になります。
- 「予定の時間のみを表示」
- 公開設定が限定的な状態
制限表示では、
- 予定名は非表示
- 表示は「予定あり」のみ
- 色は小さな丸だけ
となります。
すべてのカレンダーを「一般公開」＋「すべての予定の詳細を表示」に統一することで、予定名と色帯が表示されました。
3. 月表示では「終日＝帯」「時間指定＝点」の仕様
Googleカレンダーの月表示では、
| 種類 | 表示形式 |
|---|---|
| 終日予定 | 背景に色の帯 |
| 時間指定予定 | 小さな点（●） |
という仕様です。
埋め込み時もこの挙動は変わりません。
4. タイトルに時刻を含めると時間指定扱いになる
終日予定として登録しても、タイトル内に
- 13:00
- 13時
- 午後1時
など時刻と判断される文字列が含まれている場合、自動的に時間指定に変換され、点表示となりました。
まとめ
今回の検証により、以下が確認できました。
- 色分けを維持するには複数カレンダー統合が必要
- 公開設定が1つでも揃っていないと、予定名が非表示になる
- 月表示では終日以外は点表示となる
- タイトルの時刻表記で終日設定が解除される
Googleカレンダー埋め込みは便利ですが、
仕様を理解した上で設定を行う必要があります。
同様の場面で活用される方の参考になればと思い、記録として残します。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
