【FullCalendar】GoogleCalendarの同期について #FullCalendar

kotaziです。

FullCalendarのGoogleCalendar同期について。

Google Calendar

Google Calendar

FullCalendarではGoogle Calendarのイベントを表示することができます。
GoogleCalendarはバックエンド側で管理・保持しているイベントデータを提供することができます。
(FullCalendarにはない機能)

Before you code...

GoogleCalendarのAPIキーが必要です

Google Developer Consoleから新しいプロジェクトを作成してください
そのプロジェクトのサイドバーから、「APIs & auth > APIs」と移動します
"Calendar API"をオンにしてください。
サイドバーから「APIs & auth > Credentials」と移動します
"Public API access"セクション内の"Create new Key"をクリックします
"Browser Key"を選択します
カレンダーをホストするドメインが分かれば入力してください。いつでも変更できるので分からなければそのままで大丈夫です
新しいAPIキーが現れます。

Googleを公開する

GoogleCalendarのインターフェイスで、左側にある"My calendars"へ
カレンダーにカーソルを当て、矢印をクリックします
メニューが表示されるので"Share this Calendar"をクリックします
"Make this calendar public"にチェックします
"Share only my free/busy information"にチェックが入っていないことを確認してください
保存します

GoogleCalendarのIDを取得する

GoogleCalendarのインターフェイスで、左側にある"My calendars"へ
カレンダーにカーソルを当て、矢印をクリックします
メニューが表示されるので"Calendar settings"をクリックします
"Calendar Address"セクションのCalendarIDを見てください。 "abcd1234@group.calendar.google.com"のようなものです。

Dependencies

続いて、必要なJS/CSSを追加します。標準的なファイルに加え、gcal.jsも追加します。

<script type='text/javascript' src='fullcalendar/gcal.js'></script>

Writing the code

JSでカレンダーを初期化する準備が整いました。これが最小のサンプルになります。

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        events: {
            googleCalendarId: 'abcd1234@group.calendar.google.com'
        }
    });
});

</script>

特定のEvent Sourceオプションを追加したければ、eventsオブジェクトに含めることができます。

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        events: {
            googleCalendarId: 'abcd1234@group.calendar.google.com',
            className: 'gcal-event' // an option!
        }
    });
});

</script>

Timezones

GoogleCalendarのプラグインではtimezoneをリスペクトしています。
false(デフォルト)にしておくと、GoogleCalendarのタイムゾーン設定が使用されます。特定のものを指定していれば、これらは無視されます。

Multiple Google Calendars

eventSourcesオプションを利用すれば複数のGoogleCalendarを利用することができます。

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        eventSources: [
            {
                googleCalendarId: 'abcd1234@group.calendar.google.com'
            },
            {
                googleCalendarId: 'efgh5678@group.calendar.google.com',
                className: 'nice-event'
            }
        ]
    });
});

</script>

Advanced

カレンダーごとに異なるAPIキーを利用する場合、googleCalendarApiKeyをセットするには個々の[EventSource]を用います。

GoogleAPIのエラーを検知する必要がある場合、jQueryのAJAZエラーハンドリングには方法がありません。FullCalendarのgoogleCalendarErrorを使います。