fullCalendarの使い方とGoogleカレンダーとの連携方法

先日GoogleCalendarとfullCalendarを連携させる必要がありました。その時fullCalendarの使い方がいまいちわかりにくかったのでまとめてみました。

fullCalendarとは?

Googleカレンダーをサイトに貼り付けることがあると思いますが、デフォルトだと正直見た目がイマイチですよね。
しかしfullCalendarというjQueryを使えば、グーグルカレンダーの中身だけを取り出してデザインをカスタマイズすることが可能です。

以前からfullCalendarを使用したサイトを運営していたのですが、ある日カレンダー情報が表示されていない事に気が付きました。ディベロッパーツールのコンソールを確認するとエラーが出ていました。
原因は2014年11月17日にCalendarAPI2が廃止され今までの方法では動かなくなっていたからのようです。
「カレンダーが動かない!」と困っている方は以下の方法を試してみてください。

API3になってからグーグルカレンダーとfullCalendarを連携させるにはGoogle Calendar API Keyの取得が必要になりました。
今回はその取得方法からカレンダーが動くまでの手順を紹介します。

fullCalendarの導入

公式サイトからfullCalendarをダウンロードします。

解凍したらディレクトリ内を確認します。色々とファイルが入っていますが、fullCalendarとgoogleCalendarを連携させたいときは「gcal.html」を使用します。


googleカレンダーとfullcalendarを連携するためには「gcal.html」内にこれから取得するGoogle Calendar API Key とカレンダーIDを記述する必要があります(今回のデモで触るのはこのgcal.htmlのみです)。
まずGoole Calendar API Keyを取得しましょう。

Goole Calendar API Keyの取得

まずGoogle Developer Consoleにアクセスしプロジェクトを作成します。プロジェクト名を入力して作成します。

作成されたプロジェクトをクリックします。左メニュー内「APIと認証」⇒「API」をクリックします。

APIリストの中にあるCalendarAPIをクリック。

APIを「オン」にします。

左メニューの「APIと認証」⇒「認証情報」をクリックします。

9

次に「公開 API へのアクセス」の「新しいキーを作成」をクリック。


「ブラウザーキー」を選択します。

次の画面では、カレンダーを表示するサイトのドメインを指定したい場合はドメインを入力します。特に指定しない場合は未入力でも大丈夫です。「作成」をクリック。

これでAPIキーが作成されます。

グーグルカレンダーの設定

次はgoogleCalendarの設定です。
googleCalendarにアクセスして、公開したいカレンダーの「カレンダー設定」をクリックします。

「このカレンダーを共有」をクリックして、「このカレンダーを一般公開する」にチェックを入れ保存します。

カレンダーの詳細に戻って、カレンダーIDが設定されているのを確認します(☓☓☓☓☓☓☓@group.calendar.google.comみたいな形式)。
もし、カレンダーIDが「@group.calendar.google.com」のような形式じゃない場合それはメインカレンダーを使っているからだと思います。メインカレンダーとはデフォルトでユーザーに必ず与えられるはじめから存在するカレンダーのことです。カレンダーIDが「@group.calendar.google.com」の形式じゃない場合は新しくカレンダーを作成してください。

APIキーとカレンダーIDをファイルに記述

ここまでいったらダウンロードしたディレクトリの「gcal.html」を開いてスクリプトタグ部分に行きます。
そのなかの「googleCalendarApiKey」と「events」を先ほど取得したAPIキーとカレンダーIDに書き換えます。

ブラウザからgcal.htmlにアクセスして確認するとグーグルカレンダーの内容が表示されているのが確認できます。
あとは好きな様にCSSをいじってカスタマイズしてください。

以上、googleClendarとfullCalendarの連携方法でした。
とりあえずここまでが導入です。fullCalendarには様々なオプションが用意されていて、日本語化も含めいろいろとカスタマイズが出来るようになっています。詳しくは公式サイトを参考にしてください。