Google Calendarでスケジュールを管理していて、任意のウェブページに予定を連携して表示させるためFullCalendarをよく使っています。
今回の案件はGoogle Calendar内に複数のサブカレンダを持っており、それぞれを色分けして連携させるというものでした。
まずメインのカレンダのIDは分かっているので、サブカレンダの方を調べることから始めます。

Google Calendar API Keyの取得と設定

Google Calendar API Keyはこちらからあらかじめ取得しておきます。
Google Calendarにログインし、設定の画面を呼び出します。
サブカレンダの統合というサブメニューをクリックすると、Calendar IDが表示されますので、これをメモします。
サブカレンダの数だけこの作業を繰り返します。
FullCalendarを用いてjQueryでスクリプトを下記の通り作成します。
$(function(){

  $('#calendar').fullCalendar({

    googleCalendarApiKey: '<YOUR API KEY>',

    eventSources: [

      {

        googleCalendarId: '<YOUR CALENDAR ID>',

        classname: 'mycalendar',

          backgroundColor: '#F9CC68'

      }

    ],

    header              : {

      left              : 'today prev,next',

      center            : 'title',

      right             : 'month,agendaWeek,agendaDay'

    },

    views               : {

      week              : {

        columnFormat    : 'M/D [(]ddd[)]'

      }

    },

    timeFormat          : 'HH:mm',

    defaultDate         : '2018-01-01',

    timezone            : 'Asia/Tokyo'

  });

});
なおFullCalendarのバージョンはこの文章作成時点ではVer.3です。
このスクリプトで留意する点は、次の4つです。
  1. Google Calendar API Key
    FullCalendarにGoogle Calendarを呼び込む都合上、必須ですね。
  2. イベントソース
    eventSourcesオプションに、サブカレンダのIDと背景色の値をセットにして、配列の形で記述します。
  3. ページを開いた時に表示を始める日付
    defaultDateオプションにYYYY-MM-DD形式で日付を記述します。
    例えば、毎月末に翌月の予定のページを追加する場合に、その月のカレンダーを表示させるには、その翌月1日を値としてページ内に埋め込んでおき、FullCalendar関数の外側で変数化しておくとよいでしょう。
  4. タイムゾーン
    最後にタイムゾーンはtimezoneオプションにAsia/Tokyoと記述します。
    これを設定しないと、協定世界時で表示されます。