サイト内にカレンダーを表示させる方法はいくつかあると思いますが、
fullcalender.jsがgoogleカレンダーを直接埋め込むよりもデザイン変更が簡単で、よく利用しております。
http://fullcalendar.io/
googleカレンダーの内容をそのまま表示させたりできるので非常に便利です。
先日、複数のgoogoleカレンダーをこのfullcalenderに表示させるお仕事をいただき、実際に埋め込んだのですが、Google API v3を使用して複数とりこむ方法がわからず苦戦しました。。
私以外にも、これで苦戦されている方多いのではないでしょうか?
そこで今回は、「fullcalendarに複数のgoogleカレンダーを表示する方法」をわかりやすく解説したいと思います。
一度ご確認いただき是非お役立てください。
設置方法は本家サイトの解説を参考にしました。
まずは下記をご確認ください。
【heder内】
1 2 3 4 5 |
<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内】
カレンダーを表示させたい位置に書く
1 |
<div class="calendar1"></div> |
【オプション設定】
Google APIの取得方法は割愛します。
googleカレンダーを複数読み込むための設定をここでします。
(html内に設置)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script> $(document).ready(function() { $('.calendar1').fullCalendar( { // API キーを設定する googleCalendarApiKey: 'ここに取得したAPIキー', eventSources: [ { //スケジュール1 googleCalendarId: 'カレンダーID1', className: 'calendar_1' }, { //スケジュール2 googleCalendarId: 'カレンダーID2', className: 'calendar_2' } ], }, }); }); </script> |
カレンダーIDは、表示させたいgoogleカレンダー(共有で一般公開設定必須)の「カレンダー設定」→「カレンダーのアドレス」で確認できます。
「 className:」でclass指定することで、cssでのデザイン設定もできます。