【初心者向け】GoogleカレンダーをWebサイトに埋め込む方法

Googleカレンダーは、スケジュール管理だけでなく、Webサイトに埋め込むことでお知らせやイベント情報の共有にも活用できます。一部のお客様では、店舗のスケジュールやイベントのスケジュールをサイトへの掲載で通知するため、よく利用されております。
本記事では、Googleカレンダーの作成から公開設定、埋め込みコードの取得方法までを、画像付きでわかりやすく解説します。

1.Google Calendarにアクセス

https://calendar.google.com/

本URLにアクセスします。
未ログインの場合には、ログイン画面が開きますので、Googleアカウントでログインします。

ログイン画面

2.新規にカレンダーを作成

①｢他のカレンダー｣の｢＋｣ボタンを押下します。

｢他のカレンダ｣ーの｢＋｣を押下

②｢新しいカレンダー｣を作成を選択します。

｢新しいカレンダーを作成｣を選択

③新しいカレンダーの以下を入力します。
・名前
・説明
・タイムゾーン(日本標準時)

入力が完了したら、｢カレンダーを作成｣を押下します。

ここで入力された名前／説明は、Googleカレンダーの画面に掲載されます。

新しいカレンダー情報の入力

④作成が完成すると、画面下部に｢XXXXを作成しました｣が出力されます。

｢← 設定｣を押下して前の画面に戻ります。

新しいカレンダーの作成完了

3.一般公開設定

①作成した｢カレンダー名｣を選択し、3点ボタンを押下します。

3点ボタンの押下

②｢設定と共有｣を選択します。

｢設定と共有｣の選択

③一般公開の設定を行います。
・｢一般公開して誰でも利用できるようにする｣をチェックします。
・｢予定の表示(すべての予定の詳細)｣を選択して下さい。

選択したカレンダー名で登録したスケジュールが一般公開される形となります。

一般公開の設定

これで一般公開の設定が完了です。

4.サイト用の｢埋め込みコード｣を取得

先ほどの画面の下部に｢埋め込みコード｣があります。こちらを取得して、サイトに埋め込むだけでGoogleカレンダーを御社サイトに掲載できます。

｢埋め込みコード｣の取得

5.CSSで表示を調整

CSSで良く書く書き方としては以下です。
Googleカレンダーのスケジュールをラップして制御します。

padding-top:で縦の高さを制御して表示したりします。
この辺りは、Web制作事業者さんにお願いすれば簡単にレスポンシブルデザインで表示してくれるはずです。

今回は以上です。