FullCalendar を日本語表記にする

JavaScript

FullCalendar とは、JavaScript で書かれたカレンダーライブラリ。 jQuery のプラグインとして利用する。

http://arshaw.com/fullcalendar/

いつの間にか FullCalendar が 1.4.7 にアップしていたので、確認をかねて記事にしてみた。すでにカスタマイズするためのパラメータが用意してあるので、日本語表記にするのは簡単だったりする。

<html>
<head>
<link rel="stylesheet" type="text/css" href="fullcalendar.css" />
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery-ui-custom.js" ></script>
<script type="text/javascript" src="fullcalendar.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#calendar').fullCalendar({
       header: {
           left: 'prev,next today',
           center: 'title',
           right: 'month,basicWeek,basicDay'
       },

       titleFormat: {
           month: 'yyyy年 M月',
           week: '[yyyy年 ]M月 d日{ &#8212;[yyyy年 ][ M月] d日}',
           day: 'yyyy年 M月 d日 dddd'
       },
       columnFormat: {
           month: 'ddd',
           week: 'M/d（ddd）',
           day: 'M/d（ddd）'
       },

       dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
       dayNamesShort: ['日','月','火','水','木','金','土'],

       buttonText: {
            prev: '&nbsp;&#9668;&nbsp;',
            next: '&nbsp;&#9658;&nbsp;',
            prevYear: '&nbsp;&lt;&lt;&nbsp;',
            nextYear: '&nbsp;&gt;&gt;&nbsp;',
            today: '今日',
            month: '月',
            week: '週',
            day: '日'
       }

       });
    });

</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

fullcalendar.js の中身を覗くと、他にも色々デフォルト値が設定してあるので、それを参考にいじってみるといいかも。