仕事部屋 / 雑感など

Googleカレンダーの埋め込みデザインをカスタマイズ

by 管理人 · 公開済み 2020年3月27日 · 更新済み 2020年11月10日

Googleカレンダーをサイトに埋め込みたいけど、デザインが…。

WEBサイトにカレンダーを設置するプラグインはあまたありますが、Googleカレンダーなら元々使っていて操作に慣れているという方も多い上に、わざわざサイトにログインせずにスマホで予定の追加編集ができるのでとっても便利です。

GoogleカレンダーのページからはWEB埋め込み用のコードも取得できますよね。
ただ一つ問題を上げるとすれば、見た目のカスタマイズができないこと↓

サイト全体の統一感を意識して作っているのに、カレンダーの部分だけ「ザ・Googleカレンダー」というのはかっこ悪いですよね。
今回はGoogleAPIと、便利なjQueryプラグイン「FullCalendar」を使ってGoogleカレンダーの埋め込み表示をカスタマイズする方法をご紹介しようと思います。

１）読み込みたいGoogleカレンダーを制作する

グーグルアカウントにログインした状態で、Googleカレンダーにアクセスし、新しいカレンダーを作成します。

「設定と編集」の「アクセス権限」で「一般公開して誰でも利用できるようにする」にチェック。

設定画面の下の方にカレンダーのIDが書かれています。
後で使いますので開いておきましょう。

２）GoogleAPIを取得する

GoogleAPIライブラリのページにアクセスして、「Google Calendar API」を選択。

「有効にする」をクリック。

「認証情報」→「認証情報を作成」→「APIキー」を選択。

するとAPIキーが発行されます。
後ほど使いますのでキーをコピーしておきましょう。
続けて「キーを制限」を選択。

「HTTPリファラー」を選択し、配置するサイトのURLを設定します。

※APIのリファラーURL指定でよくあるエラー
たとえば「https://sample.com/」とだけ書かれていると、https://sample.com/のURLでしかAPIが有効になりません。「https://sample.com/以下のURL全て」に適用させたい場合は「https://sample.com/*」と「*」を書き足しましょう。

また「APIの制限」で「キーを制限」を選択し、「GoogleCalendar」にチェックを入れて「保存」します。

３）FullCalendarをダウンロードして読み込む

ファイルをダウンロード
以下のサイトからファイルをダウンロードしてください。

https://fullcalendar.io/
「Get Started」→「Download」

※今回のチュートリアルはバージョン4.3.1です。
バージョンによって仕様が異なりますのでご注意ください。

お好みのデザインを選ぶ
exampleの中にサンプルが入っているので、ここからお好みのテンプレートを選びます。
今回はdaygridを使ってみようと思います！

ファイルをアップロード
ダウンロードしたファイルを解凍します。
使うファイルは「packages」フォルダの中の以下のファイルです。

core/main.js
core/main.css
core/locales/ja.js
daygrid/main.js
daygrid/main.css
google-calendar/main.js

●今回はdaygridを使うため上記のファイルになっていますが、選んだテーマによって変更してくださいね。

以下の形になるようにファイルセットを作り、「fullcal」ごとサーバーにアップロードしてください。

fullcal	┬ core	┬ main.js
	│	├ main.css
	│	└ locales	─ ja.js
	├ daygrid	┬ main.js
	│	└ main.css
	└ google-calendar	─ main.js

WordPressの場合は、使用しているテーマディレクトリの直下に入れてください。

アップロードしたファイルを読み込む
<head>内に以下のようコードを書き足します。

<head>
<link href='../fullcal/core/main.css' rel='stylesheet' />
<link href='../fullcal/daygrid/main.css' rel='stylesheet' />
<script src='../fullcal/core/main.js'></script>
<script src='../fullcal/core/locales/ja.js'></script>
<script src='../fullcal/daygrid/main.js'></script>
<script src='../fullcal/google-calendar/main.js'></script>
<script>
  //Full Calendar
   document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
     　   locale: 'ja',
     　   plugins: [ 'dayGrid','googleCalendar' ],
          googleCalendarApiKey:'APIキー',
          events:'GoogleカレンダーID'
     });
      calendar.render();
      });
</script>
</head>

「APIキー」の部分には２）で取得したAPIキーを、
「GoogleカレンダーのID」部分には１）で取得したカレンダーIDを入れます。
日本語表記より英語表記がよいという方は、「locale: ‘ja’,」を消してくださいね。
なお、WordPressの場合は上記のURLの「../」部分を

<?php echo get_template_directory_uri(); ?>/

のように書きます。このように↓

...
<link href='<?php echo get_template_directory_uri(); ?>/fullcal/core/main.css' rel='stylesheet' />
<link href='<?php echo get_template_directory_uri(); ?>/fullcal/daygrid/main.css' rel='stylesheet' />
<script src='<?php echo get_template_directory_uri(); ?>/fullcal/core/main.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/fullcal/core/locales/ja.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/fullcal/daygrid/main.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/fullcal/google-calendar/main.js'></script>
...