jQuery：Google カレンダーの見た目をカスタマイズする – fullCalendar.js
Google カレンダーをページに埋め込んだときの見た目をシンプルにカスタマイズしたかったので、実装方法を調べてみました。Google Chrome以外のブラウザのシークレット（プライベート）モードでつまずいた部分もあったので、注意点なども記載しています。
01. 実装サンプル
考え方としては、Google Mapsとほぼ同じで、APIを取得して外部jQueryを用いてCSSを整えていくイメージです。
02. GoogleカレンダーのAPIキー取得
まず、必要なGoogleカレンダーのAPIキーを取得します。
Googleカレンダーを使用する任意のGoogleアカウントにログインしGoogle API Consoleにアクセス→GoogleカレンダーのAPIキーを取得しておきます。
取得方法については、今回詳しく書きませんので、下記のサイトさまを参照してください（とてもわかりやすいです）。
↑の最後で紹介されているアプリケーションの制限→「HTTPリファラー（ウェブサイト）」を選択し、ウェブサイトの制限→（このブログの場合）下記のように記載しました。
https://monakanote.net/*余談ですが、Google Mapsとは違い、今の時点（2019年5月の時点）ではAPIの取得にクレジットカードの登録などを行う必要はありません。ただ、Google Mapsのようにいつ登録必須となるかわかりませんので、実装する際には今後注意が必要そうです。
GoogleカレンダーのID取得
共有したいGoogleカレンダーのIDを取得します。共有の設定にチェックを入れるのも忘れずに行います。
共有カレンダーの準備
Googleカレンダーにログインし、右上の歯車マーク（設定メニュー）→設定をクリック。カレンダーの設定画面へ遷移します。
左側のメニューの柱からカレンダーを追加→新しいカレンダーを作成をクリック。任意の「名前」「説明」を入力して、カレンダーを作成します。
マイカレンダー設定に新しく作ったカレンダーが追加されているので、名前をクリックして入ります。
新しく作ったカレンダーについて、設定を行なっていきます。
まずは、アクセス権限にチェックを入れます。これで、カレンダーが「公開」になりました。
最後に、後ほどjsの設定で使用するカレンダーIDをメモしておけば、準備完了です。
03. Full Calendarのダウンロード
プラグインをダウンロードします。公式サイトでダウンロードできる最新のファイル（2019年5月の時点）は、v4.1.0となりますが、4系統ではファイル構成が従来のものと異なっていたため、少し分かりづらくありました。今回は馴染みのある3系統を用いて実装を行いたいと思いますので、古い方v3.9.0をダウンロードします。
v3.9.0のダウンロード手順
上記の公式サイトにアクセスしGet Startedボタンを押します。
↑ダウンロードの項目があります。ここでの最新はv4.1.0。最新のファイルはそのままダウンロードできますが、今回ダウンロードを行いたいのはv3.9.0なので、view all releasesのテキストリンクに進みます。
さまざまなバージョンが公開されていますが、その中の「v3.9.0」に進みます（この時は2ページ目にリンクがありました）。
Assetsから「fullcalendar-3.9.0.zip」ファイルをダウンロードします。
必要なファイル
ダウンロードしたzipを解凍して中を確認します。今回必要となるファイルは少し多いですが下記の5つです。
- fullcalendar.css
- lib/moment.min.js
- fullcalendar.min.js
- gcal.min.js
- locale/ja.js
04. 実装方法
準備が整ったので、実装していきます。
まずは、カレンダーを表示させたい部分に下記を記載します。
<div id="calendar"></div>次は、jsです。ダウンロードしたjsファイルを設置します。ディレクトリは任意で、jQueryは基本下記のものをコピペでOKです。
<script src="moment.min.js"></script>
<script src="fullcalendar.min.js"></script>
<script src="gcal.min.js"></script>
<script src='ja.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
displayEventTime: false,
googleCalendarApiKey: 'カレンダーのAPIキーを入れます',
events: 'カレンダーのIDを入れます',
eventClick: function(event) {
// ポップアップのウィンドウサイズ指定
window.open(event.url, 'gcalevent', 'width=640,height=480');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>最後に見た目を調整していきます。cssファイルは、jsよりも前に記載し、色などを自由に指定していきます。
<link rel="stylesheet" type="text/css" href="fullcalendar.css">05. 気をつけること
プライベートウィンドウ対策。APIキー制限の「ウェブサイトの制限」で入力するのは、特定のページではなくドメイン
Google Crome以外のブラウザのシークレット（プライベート）モードで表示の確認を行なっていたところ、カレンダーの表示はされるのに予定の表示がされないという現象が起きました。これは通常のブラウザでは問題なく表示されるのに、シークレット（プライベート）モードの時にだけ表示されないというもの…。
調べてみると、原因はウェブサイトの制限（上記で「https://ドメイン/*」を指定していた部分）にあったらしく、カレンダーを使用したいページのURL（例えば「https://ドメイン/abc/」）を記載した場合に発生していることがわかりました。
ページ単位で許可していても、ドメインに許可を出していないとドメインで弾かれる…ということらしく、「https://ドメイン/*」というような感じでドメイン全体を指定してあげると良いようです。