【FullCalendar】GoogleCalendarの同期について

kotaziです。

FullCalendarのGoogleCalendar同期について。

• Google Calendar

---

Google Calendar

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

---

Before you code...

GoogleCalendarのAPIキーが必要です

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

---

Googleを公開する

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

---

GoogleCalendarのIDを取得する

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

---

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: '[e-mail]'
        }
    });
});

</script>

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

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        events: {
            googleCalendarId: '[e-mail]',
            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: '[e-mail]'
            },
            {
                googleCalendarId: '[e-mail]',
                className: 'nice-event'
            }
        ]
    });
});

</script>

---

### Advanced

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

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