カレンダーの作成
なんとなくjQuery＋FullCalendarを利用してカレンダーを作ってみたわけですが、JavaScriptのところに出すほどでもないし、Webのほうでもないような気がして、戯言においておくことにします。
マンションの広報を電子化しようとすると、カレンダーが必要になるケースがあると思い、ちょっと試作してみたというもので、住んでいるマンションのごみ収集カレンダーにしてみました。凝ったものにする必要はないから、かなり手抜き作成をしちゃっています。まずできあがったサンプルは以下のような感じです。画面の横幅が足りない場合はブラウザを最大化してご覧になってください。
実装方法
まずFullCalendarにアクセスしてPluginをDownloadしてきます。解凍しておきましょう。head要素内でjQueryとfullcalendar.min.jsを読み込ませます。ファイルのpathはscriptを置いた場所に合わせて適宜変更してください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type='text/javascript' src='fullcalendar.min.js'></script>
続いてカレンダーを表示する部分のHTMLを記述します。該当部分は以下のようにしておくだけです。
<div id='calendar'> </div>
カレンダーを表示するにはScriptを記述しなければなりません。fullcalendar.min.jsを読み込ませた次の行にでも以下のように記述します。
<script type='text/javascript'>
$(function() {
var date=new Date(), d=date.getDate(), m=date.getMonth(), y=date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
titleFormat: {
month:'yyyy年 M月'
},
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
editable: true
});
});
</script>これだと、ただカレンダーを日本語化して表示するだけです。これをjQueryを利用してJavaScriptから処理していくことにします。カレンダーはtableで作られていて、tdには、それぞれfc-sun,fc-mon,...fc-satというようにClassに曜日が割り振られているので、それを利用すれば制御も難しくありません。また、日付が薄く表示されている前月と翌月には、fc-other-monthが付加されているので、こちらも利用します。
まず、住んでいるところのごみ収集スケジュールは、毎週月曜日がプラスチック、毎週火曜日と金曜日が燃やせるごみとなっているので、最初にそれを処理することにしてみましょう。ちょうどいい具合にfc-day-contentというClassのDIV要素があるので、今回はそこへ書き込むことにします。追加して次のようにしました。
<script type='text/javascript'>
$(function() {
var date=new Date(), d=date.getDate(), m=date.getMonth(), y=date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
titleFormat: {
month:'yyyy年 M月'
},
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
editable: true
});
/* プラスチック */
$('.fc-mon .fc-day-content').html('プラスチック');
/* 燃やせるごみ */
$('.fc-tue .fc-day-content, .fc-fri .fc-day-content').html('燃やせるごみ');
if ((m==0)||(m==11)) $('#calendar').append('<p id="caution">※12月31～1月3日はごみの収集がありません。<\/p>');
});
</script>曜日は固定なので、スタイルシート側で背景色を決めうちしておけばJavaScriptから色を変更させる指定を行なわなくても大丈夫。.fc-mon .fc-day-contentと.fc-tue .fc-day-content, .fc-fri .fc-day-contentにスタイルシートを指定しておけば問題なしですね。ついでに月を調べて、12月と1月の場合には、カレンダーの下側に注意書きを追加するようにしました。
残りはちょっと面倒な水曜日第1週と第3週の破砕ごみ、水曜日第2週と第4週のびん・かん、木曜日第1週と第3週のペットボトル、木曜日第4週の小型家電製品です。これはJavaScriptをどう記述するか迷いましたが、FullCalendarのドキュメントを読んでも対応できる機能がなかったら時間を吸われるだけと判断して、jQueryで強引に処理していくことにしました。以下のような実装で目的を果たしています。
<script type='text/javascript'>
var elw,elt,omw,omt,pb='ペットボトル<br>古紙回収',cr='破砕ごみ類<br>有害ごみ',bt='びん・かん<br>スプレー缶';
function SetCalender() {
/* 水曜日の1列目が別の月か判定 */
omw=$('.fc-wed .fc-day-content').eq(0).parent().parent().attr('class').match(/fc-other-month/)?1:0;
/* 破砕ごみ・びん・かん */
elw=$('.fc-wed .fc-day-content');
elw.html('').removeClass('bt').removeClass('cr');
elw.eq(0+omw).html(cr).addClass('cr');
elw.eq(2+omw).html(cr).addClass('cr');
elw.eq(1+omw).html(bt).addClass('bt');
elw.eq(3+omw).html(bt).addClass('bt');
/* 木曜日の1列目が別の月か判定 */
omt=$('.fc-thu .fc-day-content').eq(0).parent().parent().attr('class').match(/fc-other-month/)?1:0;
/* ペットボトル・小型家電製品 */
elt=$('.fc-thu .fc-day-content');
elt.html('').removeClass('pb').removeClass('sel');
elt.eq(0+omt).html(pb).addClass('pb');
elt.eq(2+omt).html(pb).addClass('pb');
elt.eq(3+omt).html('小型家電製品').addClass('sel');
}
$(function() {
var date=new Date(), d=date.getDate(), m=date.getMonth(), y=date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
titleFormat: {
month:'yyyy年 M月'
},
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
editable: true
});
/* プラスチック */
$('.fc-mon .fc-day-content').html('プラスチック');
/* 燃やせるごみ */
$('.fc-tue .fc-day-content, .fc-fri .fc-day-content').html('燃やせるごみ');
setInterval('SetCalender()',100);
if ((m==0)||(m==11)) $('#calendar').append('<p id="caution">※12月31～1月3日はごみの収集がありません。<\/p>');
});
</script>処理はSetCalenderという関数を作り、それを呼び出すようにしています。これはカレンダーの左右をクリックしてカレンダーを書き換えた場合に、直前にJavaScriptから表示していた月の文字情報が残ってしまうためです。そこでsetIntervalを使って書き換えました。たぶんコールバック関数があると思うんだけど、ドキュメントを読まなかったのでこのようなことに……(笑)。
SetCalender自体は、最上段が前月の可能性を考慮して、fc-day-contentのセルの親の親になっているClass名を調べています。fc-other-monthならばフラグを立てておき、処理する行を1行下へずらすわけです。最初に文字情報をクリアし、割り当てたClass名も除去をしたら、新しい情報を書き込んでClass名も適切なものにして背景色を変更させます。
とまあ、時間をかけずに作成するために結構手抜き＆強引な処理をしていますが、以上のようにJavaScriptを記述すればこれぐらいのカレンダーはすぐに作れるということですね。参考にするならばこんな強引で変な作りのジャンク品より、ほかの方が作ったものを調べたほうがいいと思います。