FullCalendar の複数カレンダー表示

JavaScript

元ネタはこちら、http://oshiete.chance.com/qa6564701.html

イベントが空っぽだと寂しいのでGoogleカレンダーの日本の祝日を表示してみた。
前月、次月に移動するボタンも追加した。

<html>
<head>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../fullcalendar/gcal.js'></script>
<script type='text/javascript'>

  $(document).ready(function(){

      var cals = $('#calendar .tabs');
      var date = new Date();
      date.setMonth(date.getMonth() - date.getMonth() % cals.size());

      cals.each(function(){
          $(this).fullCalendar({
              header: {left:'',center:'title',right:''},
              events: 'http://www.google.com/calendar/feeds/ja.japanese%23holiday%40group.v.calendar.google.com/public/full/',
              year:  date.getFullYear(),
              month: date.getMonth(),
          });
          date.setMonth(date.getMonth() + 1);
      });

      $('#prev').click(function(){
          cals.each(function(){ cals.fullCalendar('prev'); });
      });
      $('#next').click(function(){ 
          cals.each(function(){ cals.fullCalendar('next'); });
      });
  });

</script>
<style type='text/css'>
    #calendar {width: 980px;margin: 0 auto;}
    #calendar .tabs {width:300px;height:300px;float:left;padding:10px}
    #buttons {text-align:center;}
</style>
</head>
<body>
<div id="buttons">
<input type="button" id="prev" name="prev" value="前へ" />
<input type="button" id="next" name="next" value="次へ" />
</div>
<div id='calendar'>
<div class="tabs"></div>
<div class="tabs"></div>
<div class="tabs"></div>
</div>
</body>
</html>