[JavaScript] いちばんシンプルなカレンダー作成関数 : してログ

[JavaScript] いちばんシンプルなカレンダー作成関数

ネットで探しても、シンプルで使い勝手が良いカレンダー作成関数が無かったので自作してみました。そのまま使えて、余計なコードが入って無くて、カスタマイズもしやすい、そんな関数になっていると思います。

カレンダー作成関数
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();
});
出力結果
303112345
6789101112
13141516171819
20212223242526
272829303112

コールバック関数は引数で Date オブジェクトを渡してくるので、シンプルに getDate() で日付を返せば出力結果のようになります。その Date オブジェクトを別の関数(たとえば月齢計算など)に渡せば、情報をカレンダーに埋め込むことが可能になります。オプションを増やして、デフォルトの表示を付けたり、月内の日付以外は出さないようにしたり、汎用的に拡張してもいいかも知れません。

ロジック

コードを見れば分かる程度のことですが、簡単にロジックを説明しておきます。

  1. 渡された日付からその月の1日を求め、更にその週の日曜日(A)を求める
  2. 渡された日付からその月の末日を求め、更にその週の土曜日(B)を求める
  3. (A)から(B)までループさせながらテーブルタグを構成していく
  4. 各日付の中身は、渡されたコールバック関数を呼び出して任せる

シンプルにするための工夫としては、半端な前月と次月の日付を含めてループさせることで余計なパディングをしていないこと、<tr> タグの入れ方により変数の数を減らした点です。カレンダーのカスタマイズは CSS とコールバック関数でほとんどクリアできると思います。

0 件のコメント
名前:
コメント: