【GoogleCalendar】Google カレンダーをウェブサイトに追加する

Googleカレンダーは、個人のスケジュール管理だけでなく、ビジネスやイベントの共有にも非常に便利なツールです。この記事では、Googleカレンダーをウェブサイトに埋め込む方法と、訪問者があなたの予定を簡単に保存できるようにするボタンの追加方法を詳しく解説します。これにより、ウェブサイトの訪問者が簡単にスケジュールを確認し、共有することができるようになります。

本記事では、実際のサンプルも公開しながら、解説していきます。

カレンダーをウェブサイトに埋め込む方法

1.「設定」を選択

右上の歯車アイコンをクリックして「設定」を選びます。

2.埋め込みたいカレンダーを選択

画面左側のメニューから、埋め込みたいカレンダーの名前をクリックします。

3.埋め込みコードを取得

表示された「カレンダーの統合」セクションにあるiframeコードをコピーします。

4.埋め込みコードを貼り付け

コピーしたコードをウェブサイトのHTMLエディタで、カレンダーを表示したい場所に貼り付けます。

実際の公開されたカレンダー

下記に、サンプルとしてfukucaleのカレンダーを公開したものを埋め込んでみます。

カレンダーの公開設定

埋め込んだカレンダーは、そのカレンダーを共有しているユーザーにのみ表示されます。すべての訪問者がカレンダーを閲覧できるようにするには、カレンダーを一般公開する必要があります。設定でカレンダーを「一般公開」に変更し、再度コードを取得して貼り付けてください。

※全ての訪問者に予定内容が見えるようになりますので、くれぐれもご注意ください。

必要に応じて表示項目のカスマイズも可能

必要に応じて「カスタマイズ」をクリックし、設定を変更してから表示されたHTMLコードをコピーします。

例えば、表示項目として
・タイトル
・ナビゲーションボタン
・日付
・印刷アイコン
・タブ
・カレンダーリスト
・タイムゾーン
の表示有無を変更することができます。

また、
・サイズ
・色
・表示単位(月ごと・週ごと・1日ごと)
・週の開始日
・言語
・タイムゾーン
も自由に設定することができます。

サイトの訪問者がカレンダーの予定を保存できるようにする方法

ウェブサイトにGoogleカレンダーの保存ボタンを追加すると、訪問者が自身のGoogleカレンダーに予定を簡単に保存できるようになります。このためには、事前に予定上での設定が必要です。

1.一般公開のカレンダーで予定を作成または編集

一般公開のカレンダーで、予定を作成または編集を行います。

2.予定を公開を選択

予定の詳細画面で「オプション」メニューを開き、「予定を公開」を選択します。

3.HTMLコードを取得

表示された「予定を公開」ウィンドウで、HTMLコードをコピーします。

4.ウェブサイトに貼り付け

ウェブサイトのエディタを開き、予定保存ボタンを表示したい場所にコードを貼り付けます。

実際の予定保存ボタン

下記に、サンプルの予定追加ボタンを作成しました。試しに予定追加を行ってみてください。
毎週火曜日:午後1時から5時の予定を追加することができます。

まとめ

Googleカレンダーをウェブサイトに埋め込むことで、訪問者が簡単にスケジュールを確認したり、予定を保存したりできるようになります。パソコンでGoogleカレンダーの設定を行い、カレンダーの埋め込みや保存ボタンの追加を行う手順を紹介しました。これらの方法を活用して、ウェブサイトの利便性を向上させましょう。

本記事はhttps://support.google.com/calendar/answer/41207?hl=ja&sjid=17900499195697853770-APにて作成致しました。