【IT情報】Googleカレンダーを簡単にサイトに埋め込みぺん！これでいちいちGoogleカレンダーを表示しなくてもカレンダーの確認が可能ぺん！

皆さんGoogleカレンダーは利用していますかぺん？
スマホにもデフォルトのカレンダーアプリは入っているかも知れないけど
Googleカレンダーだと家族間等で共有出来てとっても便利ぺん
自分のサイトを持っていたら簡単に埋め込めちゃうので方法をご紹介ぺん！

Googleカレンダーとはぺん？

名前から分かる通りGoogleが開発しているカレンダーぺん
WEBで利用できて無料で作成できるGmailアドレスがあれば誰でも利用可能ぺん
繰り返し、場所、通知等は勿論他のユーザとの予定の共有もできますぺん
TODOリストやリマインダーの管理もできるので仕事で使っている人もいるぺん？

GoogleカレンダーをWEBサイトに埋め込むにはぺん？

上の通りまずは埋め込みたいGoogleカレンダーの右のメニューアイコンを押すぺん
そうすると下のようにポップアップが表示されるから「設定と共有」を押すぺん
そうすると「マイカレンダーの設定」画面が表示されるけど
右上の設定アイコン→設定と押しても同じ画面に遷移できるぺん

マイカレンダーの設定画面で「アクセス権限」を押すとアクセス権限設定ができるぺん
これは誰に公開したいかをきちんと考えて設定しないと意図せず開示しちゃうぺん
家族間や会社で共有する場合は「特定のユーザーとの共有」をすればいいけど
誰でも見られるようにするには「一般公開して誰でも利用できるようにする」を選択するぺん

この時「予定の表示（時間枠のみ、詳細は非表示）」を選択すると
予定があるということだけ表示されて詳細な内容は表示されないぺん
予定の内容まで表示したい場合は「予定の表示（すべての予定の詳細）」を選択ぺん
表示したくない予定が個別にある場合は「デフォルトの公開設定」→「非公開」でOKぺん

アクセス権限が必要な人も必要でない人も最後は「カレンダーの統合」を押すぺん
そうすると「埋め込みコード」が表示されるのでそれをWEBサイトに埋め込むぺん
ちなみに埋め込み方はHTMLのiframeタグだけど上手くいかない方は調べてぺん
基本的にHTMLで直接書けばOKだけどサイトによっては簡単なやり方でできるぺん

でそのまま埋め込んでもいいけどサイトに合わせて大きさ変更したりしたいぺん？
そういう方はカスタマイズを押すと下図のカスタマイズ画面が表示されるぺん
色々項目があるけど基本的に左の項目を変えると「埋め込みコード」が変更されるぺん
リアルタイムで右に表示されているプレビューが表示されるのでわかりやすいぺん

①カレンダーのタイトル
①部分のカレンダー名を変更可能
カレンダーの設定画面から変更することも可能
②タイトル
タイトル欄を表示するかどうかの設定でチェックを外すとトルツメされる
③ナビゲーションボタン
「今日」「◀」「▶」「▼」等の表示する日付を変更するボタンの表示設定
前月等の情報を表示されたくない場合はオフにする
④日付
左上の年月と「▼」が表示されなくなる
⑤印刷アイコン
右上の印刷ボタンの表示設定だが勿論WEBサイト単位での印刷は可能
本当に印刷されたくないなら埋め込むサイト側でも対応が必要
⑥タブ
右上の「週」「月」「予定リスト」等のボタンの表示設定
表示する単位を変更されたくない場合はオフにする
⑦カレンダーリスト
右上の「▼」の表示設定
カレンダーがひとつしかない場合は意味がないのでオフがおススメ
⑧タイムゾーン
⑮Timezonをカレンダー左下に表示するかどうかの設定
特殊でない限りはオフで問題なし
⑨幅/高さ
Googleカレンダーを埋め込んだときのサイズでサイトに合わせて変えられる
勿論埋め込みサイトのCSSにも影響を受けるので設定通りに表示されるとは限らない
⑩背景色
タイトル等の上部の色を変更できるだけでカレンダー色は変えられない
※Googleカレンダー横のアイコンを押すときに表示される色で変更可能
⑪枠線
Googleカレンダーの外周の枠線で外すと黒い枠線が表示されない
⑫デフォルトのビュー
「月」「週」「予定リスト」のどれを初期表示とするかの設定
⑥タブを表示するなら表示後に自分で変更可能
⑬週の開始日
「土曜日」「日曜日」「月曜日」からお好みで変更可能
⑭言語
好きな言語を選択可能だが当然タイトルや予定は変わらない
⑮Timezone
タイムゾーンに合わせて現在日時が変更される
⑯表示するカレンダー
複数カレンダー表示したい場合はここから選択可能