GoogleカレンダーをWEBサイトに埋め込む・IDを確認する方法

目次

Googleカレンダーの設定

Googleカレンダーにアクセスして、新しいカレンダーを作成します。

既存のカレンダーを共有(埋め込み)する場合には、「カレンダーの共有を設定する」からお読みください。

新しいカレンダーを作成する

新たにカレンダーを作成して共有する場合は、「他のカレンダー」の+アイコンをクリックして、「新しいカレンダーを作成」を選択します。

名前、説明(任意)を入力して、「カレンダーを作成」ボタンをクリック。作成されるまで10〜20秒くらい待つこともあります。

カレンダーの共有を設定する

共有したいカレンダーの名前の右側にある「︙」をクリックして「設定と共有」を選択。

画面左側のナビゲーションで、共有したいカレンダーの「予定のアクセス制限」まで進みます。

「一般公開して誰でも利用できるようにする」にチェックを入れて、「予定の表示(すべての予定の詳細」を選択。

チェックが入っていないと、自分以外のユーザーはカレンダーを見ることができないので注意。

カレンダーAPIを利用する場合(jQueryプラグイン等)

GoogleカレンダーAPIを使用するプラグインなどで「カレンダーID」が必要になる場合。

カレンダーの統合まで進むと、「カレンダーID」が記載されています。@group.calendar.google.comを含む、下記みたいなIDです。

21e39709ae6d5c7293028b580a58f5064501e4*************@group.calendar.google.com

こちらを、プラグインなどに設定したり、WEBサイトの管理者(または管理会社)にお渡しください。

なお、実際にGoogleカレンダーAPIをWEBサイトで利用するためには、Google Cloud PlatformでAPIの有効化・認証情報の設定が必要になります。

詳しくはまた別の記事で。

WEBサイトへの埋め込み(iframe)

同じ画面に、「埋め込みコード」の記載もあります。

こちらは、iframeというHTMLタグの形式になっているので、WEBサイトにそのまま手軽に埋め込むことができます。

「カスタマイズ」から少しだけ見た目の調整ができますが、変更できる箇所が少ないです。また、iPhoneではセキュリティの設定により表示できない事も多々あるので、前述のカレンダーAPIを使用してWEBサイトにカレンダーを設置することが最近ではほとんどです。

弊社ではFullCalendarというjQueryプラグインを採用することが多いです。

  • URLをコピーしました!
  • URLをコピーしました!

WHO WROTE

komadairaのアバター komadaira 代表社員・COO

地方テレビ局、歯科コンサル、中堅SIerを経て独立。ダイヤルアップ接続の時代にHTMLに魅せられ、なんだかんだ10年以上WEB制作に関わり続けている。

目次