- Excelの「図としてコピー」で表やグラフをきれいに資料へ貼り付ける方法
Topics
インフォコネクト最新情報
Googleカレンダーの作成からWebサイトへ３ヶ月分表示するまでの手順
Googleカレンダーの作成からWebサイトへ３ヶ月分表示するまでの手順
こんにちは、チーフクリエイターのSHOJIです。みなさんは、Webサイトやブログでイベント情報やスケジュールを共有するとき「更新が面倒」と感じたことはありませんか？
そんなときに便利なのが、Googleカレンダーの埋め込み機能です。一度サイトに設置しておけば、Googleカレンダー上で予定を更新するだけで、自動的にWebサイトにも反映されます。
ですが、Googleカレンダーの設定では当月分のカレンダーしか表示させることができません。
そこで今回、JavaScriptを利用してGoogleカレンダーを３ヶ月分表示するカスタマイズについて、カレンダーの作成からサイトに埋め込むまでの手順をご紹介しますので、初心者の方もぜひ参考にしてみてください。
Googleカレンダー作成手順
まずは、Googleカレンダーの作成手順から見ていきましょう。
①GoogleアカウントにログインしてGoogleカレンダーを開きます。
②右上の［設定メニュー］→［設定］をクリックします。
③左サイドメニューの［カレンダーを追加］→［新しいカレンダーを作成］をクリックします。
④カレンダーの名前や説明など入力欄に適宜入力した後［カレンダーを作成］をクリックします。
⑤左サイドメニューのマイカレンダーの設定項目に追加されたカレンダーをクリックします。
⑥適宜、カレンダーの設定をします。設定は自動で保存されます。
・招待状の自動承諾：招待状を表示しない
・予定のアクセス権限：一般公開して誰でも利用できるようにする「予定の表示（すべての予定の詳細）」
⑦左上の矢印アイコンをクリックすると新しく追加したカレンダーが表示されます。
ここまでの手順で、Googleカレンダーを作成することができました。
Googleカレンダーに予定を設定
続いて、Googleカレンダーに予定を入力する手順を見ていきましょう。
①予定を登録したい日をダブルクリックすると登録画面が開きます。
②適宜、予定を設定した後［保存］をクリックします。
③設定した予定が保存されると、カレンダーに設定した予定が表示されます。
ここまでの手順で、Googleカレンダーに予定を入力することができました。
３ヶ月分のGoogleカレンダーをサイトに埋め込む
最後に、３ヶ月分のGoogleカレンダーをサイトに埋め込む手順を見ていきましょう。
①右上の［設定メニュー］→［設定］をクリックします。
②左サイドメニューのマイカレンダーの設定項目の中から、サイトに埋め込みたいカレンダーをクリックします。
③左サイドメニューのマイカレンダーの設定項目［カレンダーの統合］をクリックします。
④カレンダーの統合項目内の［カスタマイズ］をクリックします。
⑤適宜、カスタマイズ設定をします。設定は自動で保存されます。
・タイトル：チェックを入れる
・ナビゲーションボタン：チェックを入れる
・日付：チェックを入れる
・印刷アイコン：チェックを外す
・メニューを表示：チェックを外す
・カレンダーリスト：チェックを外す
・タイムゾーン：チェックを外す
・枠線：チェックを外す
・表示するカレンダー：表示させるものだけチェックを入れる
⑥設定が終わったら埋め込みコード右横のアイコンをクリックして、コードをコピーします。
⑦コピーしたコードを利用して、３ヶ月分表示させるためのJavascriptを作成します。
下記CodePenのJavascriptを参考にして、「let calenderCode2 = ''」部の中に「/*embed?」以降のGoogleカレンダーの埋め込みコードをペーストしてください。
See the Pen Googleカレンダーを3か月分埋め込み表示させるJavascript by InfoConnect (@infoconnect-inc) on CodePen.
⑧上記CodePenのHTMLを参考にして、サイトに表示させたい箇所にコードを入力します。表示用に適宜、CSSを設定してください。
⑨サイトで表示確認します。
ここまでの手順で、３ヶ月分のGoogleカレンダーをサイトに埋め込むことができました。
あとがき
Googleカレンダーの設定では当月分のカレンダーしか表示させることができないため、ご紹介したようにカスタマイズをする必要があります。
カスタマイズは、JavaScriptを利用してGoogleカレンダーの埋め込みコード内に表示させたい月のパラメータ（&dates）を付与するといった手法になります。
Googleカレンダーをサイトに埋め込むことで、訪問者がいつでも最新の予定を確認でき、イベントやスケジュールの共有がスムーズになります。今回紹介した手順を使えば、初心者でも簡単に設置でき、更新作業もGoogleカレンダー上で行うだけで自動反映されるため運用しやすくなるメリットがあります。
自身のサイトやブログにGoogleカレンダーを組み込んで、情報発信をもっと便利に、より見やすくしてみてはいかがでしょうか。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。