FullCalendar で日本の祝日を表示する

JavaScript

FullCalendar 1.5.1 がリリースされていた。Google カレンダーの日本の祝日を表示させてみた。ポイントは、gcal.js を追加することと、祝日の feed を指定すること。

日本の祝日URL は、

http://www.google.com/calendar/feeds/ja.japanese%23holiday%40group.v.calendar.google.com/public/full/

公式サイトのドキュメントやデモ「Google Calendar of US Holidays」を参考にすると良い。

一番シンプルなのが、events に URL を指定する方法。

<script type='text/javascript'>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: 'http://www.google.com/your_feed_url/'
    });
});
</script>

オプションで、クラス名やタイムゾーンが指定できる。

<script type='text/javascript'>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: {
            url: 'http://www.google.com/your_feed_url/',
            className: 'gcal-event'
        }
    });
});
</script>

複数のカレンダーを取り込む場合は、 events の代わりに eventSources を設定する。

<script type='text/javascript'>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        eventSources: [

            // source with no options
            "http://www.google.com/your_feed_url1/",

            // source with no options
            "http://www.google.com/your_feed_url2/",

            // source WITH options
            {
                url: "http://www.google.com/your_feed_url3/",
                className: 'nice-event'
            }
        ]
    });
});
</script>

(追記) FullCalender のイベントのリンク先を削除

元記事：
http://shimz.me/blog/jquery/1466

確かに、祝日などのイベントにはリンク先は不要かもしれない。
元記事を参考に、success でイベントのURLをすべて削除する。

var calendar = $('#calendar').fullCalendar({
    events: {
        url: 'http://www.google.com/your_feed_url1/',
        success:function(events){
            $(events).each(function(){
                    this.url = null;
            });     
        },
    }
});