今回はWEBサイトにGoogleカレンダーを埋め込んだ際に色が反映されない場合に使える、実際の埋め込みの見た目を予定毎に色分けをする方法を紹介します。
Googleカレンダーの埋め込みは無料で出来る分使い勝手はあまり良くない印象です。しかし少し工夫をすればGoogleカレンダーでも十分わかり易い予定表が出来ると思ったので当ブログでその方法をご紹介いたします。
Googleカレンダーの埋め込みと色分け
WEBサイトにGoogleカレンダーを埋め込む方法は下記の記事で手順を詳しく書いていますので参照して下さい。
この記事の通り、カレンダーの埋め込みはiframeと言われる要素を使ってWEBサイトに埋め込みます。
しかしiframeの性質上やれる事は限られてきます。
色の設定やカレンダーのレイアウトの設定などは、どうしてもiframeの記述に引っ張られてしまいCSSなどで思い通りのレイアウトやカラーにする事は難しいです。
実は予定の色を分ける事も、それに該当しカレンダーの実際の色分けのまま埋め込みで表示させる事は基本出来ません。
なので今回は少し変わった方法で予定毎に色が変わっているように見せる方法となっています。
その方法を次で紹介します。
Googleカレンダーの設定
まず初めに予定として入れたいものをまとめて下さい。その予定となる項目を下記の新しいカレンダーを作成からマイカレンダーとして追加します。
101号室〜304号室の全ての部屋をマイカレンダーとして単独のカレンダーを作成します。
その各々のカレンダーに対して色を付けていきます。
色は下記のように、各カレンダーの右側にある「…」のオーバーフローメニューをクリックすると出てくるポップアップから設定できます。
予定を入れる際の設定で、下記の様に予定を入れたいカレンダーを選択します。（この選択が埋め込んだ際に表示される実際の色を分けます。）
- 101号室=ミカン
- 102号室=レモン
- 304号室＝ブルーベリー…
と各々に違う色を入れていきます。
最後に、本来予定として入れたかった細かな情報をメモに入れていきます。また「毎日」や「毎週」などの繰り返しの設定などを入れときます。
102号室のメモに
- 10:00〜12:00 ×
- 12:30〜15:30 〇
- 16:00〜19:00 ×
などを入れます。
これでGoogleカレンダーの基本設定は完了です。
Googleカレンダーをカスタマイズ
次に埋め込むカレンダーの見た目をカスタマイズしていきます。
カスタマイズの設定は下記のように「…」→設定と共有→カスタマイズから行えます。
このページでは、埋め込み時の実際の見た目を確認する事が出来ます。
カレンダーのヘッダーの色やタブの有無、ビュー開始時の表記（週、月、予定）などをカスタマイズする事が出来ます。
またこのページでは、先程の基本設定で入れていった項目が色別で表示されており、クリックすると詳細（メモ）が見れるのが分かります。
ここではカスタマイズしたい人は、基本的に好きなようにカスタムして下さい。しかし幅と高さの項目だけはマイカレンダーが全て表示される高さに調整して下さい。
カスタマイズが終わったら上に表示されているiframeから始まる埋め込みコードをコピーしときます。
予定を色別にして分かり易くしたカレンダー
先程コピーした埋め込みコードを任意の場所にペーストします。
すると下記のように、分かり易く予定（マイカレンダー）が色分けされて表示され詳細な予定もしっかりと共有出来ます。
個人的に分かりやすくするための設定は【タイトル/無し】【週月表記のタブ/無し】【枠線/無し】【タイムゾーン/無し】です。（あくまで個人的になんで参考程度で…）
※ここまできてカレンダーが正常に表示されていない場合はカレンダーの「アクセス権限」の「一般公開して誰でも利用できるようにする」にチェックを入れているか確かめてみて下さい。（これにチェックが入っていないと表示されません。）
まとめ
予定を複数作るのでは無くカレンダーを複数作る。
- カレンダー毎に色を分ける。
- カスタマイズで高さを調整。
- 埋め込みコードをコピペ。
以上が「Googleカレンダーの埋め込みで予定毎の色分けを反映させる方法」でした。
この方法はあくまでGoogleカレンダーを無理矢理使って精一杯分かり易くしようとした結果の施策です。
本来はphpやCSSで別途にオリジナルカレンダーを作成してリアルタイムに更新出来るカレンダーを使うのが良いかと思います。ただ、その知識が無く、外注などに頼む費用も無いって方の苦肉の策と言う事は理解しときましょう。
