FullCalendarにGoogleカレンダーを読み込む方法

FullCalendarにGoogleカレンダーのイベントを読み込んでみました。

gcal.jsの読み込み

Goolgeカレンダーのイベントを読み込むには、jQueryとFullCalendarのjsファイルを指定した後にgcal.jsファイルを指定する必要があります。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.2/fullcalendar.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.2/gcal.js"></script>

Googleカレンダーの読み込み

eventSourcesに複数のカレンダーを読み込むことができます。
今回は公開されている「沖縄IT勉強会カレンダー」と「日本の祝日」を読み込んでみました。

「日本の祝日」の方では背景色などを変更して、「沖縄IT勉強会カレンダー」と見た目を変変えています。

$(document).ready(function() {
    $('#calendar').fullCalendar({
        // イベントソース
        eventSources: [
            {
                // 沖縄IT勉強会カレンダー
                url: 'https://www.google.com/calendar/feeds/bun6p5ccs8ce6heo9jlubisjrg%40group.calendar.google.com/public/basic'
            },
            {
                // 日本の祝日
                url: 'https://www.google.com/calendar/feeds/japanese__ja%40holiday.calendar.google.com/public/basic',
                // タイムゾーン
                currentTimezone: 'Asia/Tokyo',
                // 背景色とボーダー色
                color: '#000000',
                // 背景色(colorより優先)
                backgroundColor: '#F19824',
                // ボーダー色(colorより優先)
                borderColor: '#F15A24',
                // 文字色
                textColor: '#EEEEEE'
            }
        ]
    });
});