ネットで探しても、シンプルで使い勝手が良いカレンダー作成関数が無かったので自作してみました。そのまま使えて、余計なコードが入って無くて、カスタマイズもしやすい、そんな関数になっていると思います。
カレンダー作成関数
function build_calendar(mon,cell) { var cur = new Date(mon.getTime()); var lst = new Date(mon.getTime()); cur.setHours(0,0,0,0); cur.setDate(1); cur.setDate(-cur.getDay()+1); lst.setMonth(mon.getMonth()+1,0); lst.setDate(lst.getDate()+7-lst.getDay()-1); var tbody = ''; tbody += '<table>'; tbody += '<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>'; while (cur<=lst) { tbody += (cur.getDay()==0 ? '<tr>' : ''); tbody += '<td>'+cell(cur)+'</td>'; tbody += (cur.getDay()==6 ? '</tr>' : ''); cur.setDate(cur.getDate()+1); } tbody += '</table>'; return tbody; }
使い方
第1引数に作成したい月の Date オブジェクト(月内であれば何でも良い)を、第2引数で日付セルのコールバック関数を渡してください。セルをコールバック関数にしたことで、予定を入れたり、月齢を入れたり、自由にカスタマイズができます。
var html = build_calendar(new Date('2019/1/1'),function(cur){ return cur.getDate(); });
出力結果
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
30 | 31 | 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 | 29 | 30 | 31 | 1 | 2 |
コールバック関数は引数で Date オブジェクトを渡してくるので、シンプルに getDate() で日付を返せば出力結果のようになります。その Date オブジェクトを別の関数(たとえば月齢計算など)に渡せば、情報をカレンダーに埋め込むことが可能になります。オプションを増やして、デフォルトの表示を付けたり、月内の日付以外は出さないようにしたり、汎用的に拡張してもいいかも知れません。
ロジック
コードを見れば分かる程度のことですが、簡単にロジックを説明しておきます。
- 渡された日付からその月の1日を求め、更にその週の日曜日(A)を求める
- 渡された日付からその月の末日を求め、更にその週の土曜日(B)を求める
- (A)から(B)までループさせながらテーブルタグを構成していく
- 各日付の中身は、渡されたコールバック関数を呼び出して任せる
シンプルにするための工夫としては、半端な前月と次月の日付を含めてループさせることで余計なパディングをしていないこと、<tr> タグの入れ方により変数の数を減らした点です。カレンダーのカスタマイズは CSS とコールバック関数でほとんどクリアできると思います。
0 件のコメント