Blog ブログ

お問合せ・ご相談

GoogleカレンダーをWebサイトに埋め込む方法を解説

WEBノウハウ

2022-06-17

GoogleカレンダーをWebサイトに埋め込む方法を解説

こんにちは、Creative.LABのスタッフTです。


今回は、GoogleカレンダーをWebサイトやECサイト、ブログに埋め込む方法についてご紹介します。


こんな場合におすすめです!
・Webサイトに自社の休業日などのスケジュールを表示させたい
・ユーザーがサイトでが予約状況を確認できるようにしたい
・予約システムは不要で、スケジュールのみWebサイトに表示させたい



Googleカレンダーとは

Googleが無料で提供している、スケジュール管理ができるサービスのことです。
個人的なスケジュールの管理だけでなく、他のユーザーとカレンダーを共有すれば、お互いの予定を確認し合うことができます。
また、今回ご紹介するような、Webサイトに埋め込んで一般公開することもできたりと、充分な機能が揃っています。



①公開用のGoogleカレンダーを作る

Googleカレンダーは1つのアカウントで、複数のカレンダーを作成できます。
一般公開用のカレンダーを作成しましょう。


(1)はじめに、Googleカレンダーにアクセスし、カレンダーを追加します。 
「他のカレンダー」の横にある「+」をクリックし「新しいカレンダーを作成」を選択します。






(2)「名前」を入力して「カレンダーを作成」ボタンをクリックすると、カレンダーができます。

左のサイドバーに作成したカレンダーが表示されているか確認しましょう。



(3)作成したカレンダーに予定を登録します。
カレンダーをクリックすると、このようなようなダイアログボックスが表示されるので必要事項を入力し、「保存」をクリックします。



【入力する項目】
①タイトル
②時間
③予定を登録するカレンダー
★上記以外には、場所や説明文、リンクも入力することができます。


②Googleカレンダーを埋め込む

公開用カレンダーに予定を登録したら、早速WebサイトにGoogleカレンダーを埋め込んでみましょう。



(1)公開用カレンダーの設定画面を開く
Googleカレンダーを開き、マイカレンダーの中に先ほど登録した公開用カレンダーにチェックが入っているか確認します。
それから、3つの点が縦に並んでいる箇所をクリックし、「設定と共有」を選択します。






(2)アクセス権限を一般公開に設定する
予定のアクセス権限の「一般公開して誰でも利用できるようにする」にチェックマークを入れてください。
「予定の表示は(すべての予定の詳細)」のままにしておきます。



一般公開にチェックマークを入れると、警告が表示されますが、「OK」をクリックします。




(3)カスタマイズする
続いて、必要に応じてカレンダーをカスタマイズしてみましょう。
カレンダーの統合にある「カスタマイズ」をクリックしてください。



表示するカレンダーで、公開用カレンダーにチェックが入っているか確認します。
その他、「日本の祝日」にもチェックを入れておくと良いでしょう。



★カレンダーのタイトル、表示したい項目、背景色、枠線の有無などをカスタマイズできます。



(4)コードを埋め込む
カスタマイズが完了したら、Webサイトに埋め込みます。
カスタマイズ設定画面の一番上の部分にある埋め込みコードをコピーします。



続いて、Webサイトのコードを記述する箇所に、コピーしたコードを貼り付けます。
※WordPress(ブロックエディタ)のサイトの場合は、ウィジェットの「カスタムHTML」を選択し、コードを貼り付けます。




このようにWebサイトにカレンダーが表示されたら完成です。





まとめ

以上、GoogleカレンダーをWebサイトに埋め込む方法のご紹介させていただきました。

Googleカレンダーは無料のWebサービスですが、スケジュールの入力もしやすく、見やすいカレンダーです。
単にスケジュールをWebサイトに埋め込みたい場合には、おすすめの方法です!



新潟県内・県外問わず映像制作・Web制作・オンライン配信承ります!

Creative.LABならワンストップ対応