株式会社アルバステラ

あけましておめでとうございます。
本年もよろしくお願い申し上げます。

サイト内にカレンダーを表示させる方法はいくつかあると思いますが、
fullcalender.jsがデザイン変更も簡単で、よく利用しております。
http://fullcalendar.io/
googleカレンダーの内容をそのまま表示させたりできるので非常に便利です。

今回、複数のgoogoleカレンダーをこのfullcalenderに表示させたかったのですが、
Google API v3を使用して複数とりこむ方法がわからず苦戦。。
本家サイトの解説を参考に設定できました。

まずは基本設定
【heder内】

<link rel='stylesheet' href='css/fullcalendar.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='js/moment.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript' src='js/gcal.js'></script>

【body内】
カレンダーを表示させたい位置に書く

<div class="calendar1"></div>

【オプション設定】
Google APIの取得方法は割愛します。
googleカレンダーを複数読み込むための設定をここでします。
（html内に設置）

<script>
$(document).ready(function() {
	
　　　　　$('.calendar1').fullCalendar(
		{

			// API キーを設定する
			googleCalendarApiKey: 'ここに取得したAPIキー',
		
			 eventSources: [
            {
				//スケジュール1
                googleCalendarId: 'カレンダーID１',
		className: 'calendar_1'
				
            },
            {
				//スケジュール２
                googleCalendarId: 'カレンダーID２',
                className: 'calendar_2'
            }
        ],
			},
		});
		
	});
	
</script>

カレンダーIDは、表示させたいgoogleカレンダー（共有で一般公開設定必須）の「カレンダー設定」→「カレンダーのアドレス」で確認できます。
「 className:」でclass指定することで、cssでのデザイン設定もできます。