web制作・ホームページ制作!自社で日々簡単更新!

WebサイトにGoogleカレンダーを設置する

googleカレンダー設定今回はご自身のWebサイトにGoogleカレンダーを設置する方法を解説いたします。数人のグループでスケジュールを共有したいときや、イベントなど大勢の人にスケジュールを告知するときに役立ちます。相手が Googleアカウントを持っていなくてもカレンダーの閲覧が可能です。



WebサイトにGoogleカレンダーを設置するのに特別なプログラミングの知識は不要です。



普段Googleカレンダーを使用して個人的なスケジュール管理するのも便利ですが、上記のようにWebサイトにスケジュールを公開して他社と共有する場合も簡単に設定できるのでおすすめです。



まずは、Google側の設定を行います。



Googleアカウントを取得してることを前提に進めて行きます。



※まだGoogleアカウントを取得していない方はこちらから設定ください→https://webjps.com/webservice/42.html



Googleトップページにアクセスします。



https://www.google.co.jp/



下記のマークをクリックし、Googleカレンダーページを開きます。



googleカレンダーopen  

 

Googleカレンダーページ右上の歯車アイコンをクリックして「設定」を選択します。



Googleカレンダー設定選択





新しいカレンダーを作成して進めて行きます



下記ページ、左上の「カレンダー」をクリックします。

今回は新しくカレンダーを作成して設定を行ないます。



「新しいカレンダーの作成」ボタンをクリックします。



Googleカレンダー設定カレンダー選択





カレンダーのタイトル等、必要項目を入力後、「保存」ボタンをクリックすると、作成が完了します。



googleカレンダー新規作成





カレンダー一覧に先ほど作成したカレンダーが表示されています。

作成されたカレンダーの横の「共有: 設定を編集」を選択します。



googleカレンダー共有設定



カレンダーを一般公開する



カレンダーを一般公開するには「このカレンダーを一般公開する」にチェックを入れ、誰でも閲覧できるようにする必要があります。



このカレンダーを一般公開するにチェック



webページへの貼り付け設定



カレンダーの画面に移動し、「カレンダー」タブをクリックして対象のカレンダーを選択します。



googleカレンダー



「カレンダーの情報」ページの中段に、「このコードをウェブサイトに貼り付けてください。」といった文言がある部分の下記のソースをWebページに貼り付けると設定完了です。



が・・



今回は「色やサイズなどをカスタマイズします」というリンクをクリックして「Google カレンダー埋め込み支援ツール」を使用したいと思います。



googleカレンダー貼り付けコード


カレンダー埋め込み支援ツールで色やサイズ変更



「カレンダー埋め込み支援ツール」ページで色やサイズなど下記のカスタマイズをすることができます。



カレンダーのタイトル
表示
デフォルト ビュー
高さ
週の開始日
言語
背景色(タイトル等上部の背景色)
枠線
表示するカレンダー
タイムゾーン


Google カレンダー埋め込み支援ツール



設定が終わったら、右上の「HTML を更新する」をクリックして、ソースコードを更新します。



その下のコードをコピーし、カレンダーを表示するWebページに貼り付けると設定完了です。