カレンダーをつくってみる - コードを書いてくらす

開発環境、というほどでもないけどSublime Textを導入してみました。
C#だとエディタを探すまでもなく開発環境がそろっているのでそういうところはとても便利でしたが、
javascriptだとエディタを用意するだけでなく、デバッグもブラウザによって開発ツールが違うのでちょっと戸惑いますね。
まあ、今はちょっと調べたらすぐに情報が出てきますが。
Sublime Text、いいですね。もうちょっと使い込んでみないと分からないところもあるけど、少し触っただけでも使いやすそうな感じです。
こういうプロダクトで第一印象をここまで上げてるのは、単純にすごいと思います。機能としてはとてもシンプルなだけに。

と、まあそれは置いといて。
日付まわりの勉強がてらカレンダーを作ってみました。ちなみに2016年くらいまでは確認していますがその後は保証できません（笑）jQueryだとカレンダーUIが最初からあったりするので、こういうのを使うことはないと思いますが。

ブラウザで表示するとこんな感じのもの。
f:id:matildatilda:20150610164205p:plain

var year, month, day;

function cal(year, month, day)
{
	var weekList = [ "日", "月", "火", "水", "木", "金", "土" ];

	var firstDate = new Date(year, month, 1);
	var endDate = new Date(year, (month + 1), 0);

	document.getElementById( "calDate" ).innerHTML = year + "年" + (month + 1) + "月" + "（" + firstDate.getFullYear() + "/" + (firstDate.getMonth() + 1) + "/" + firstDate.getDate() + "-" + endDate.getFullYear() + "/" + (endDate.getMonth() + 1) + "/" + endDate.getDate() + "）";

	clearCalender();

	var tr = document.createElement( "tr" );
	var th;

	for( i = 0; i < 7; i++ )
	{
		th = document.createElement( "th" );
		th.innerHTML = weekList[i];
		tr.appendChild( th );
	}
	document.getElementById( "calender" ).appendChild( tr );
	
	tr = document.createElement( "tr" );
	var td;

	var i = 0;
	var dateCount = 1;
	for( i = 0; i < 7; i++ )
	{
		td = document.createElement( "td" );
		if( i < firstDate.getDay() )
		{
			td.innerHTML = "-";
		}
		else
		{
			td.innerHTML = dateCount;
			dateCount++;
		}
		tr.appendChild( td );
	}
	
	var modNum = dateCount % 7;

	for( ; dateCount <= endDate.getDate(); dateCount++ )
	{
		if( dateCount % 7 == modNum )
		{
			document.getElementById( "calender" ).appendChild( tr );
			tr = document.createElement( "tr" );
		}
		
		td = document.createElement( "td" );
		td.innerHTML = dateCount;
		tr.appendChild( td );
	}

	i = (dateCount - modNum) % 7;

	for( ; 0 < i && i < 7; i++ )
	{
		td = document.createElement( "td" );
		td.innerHTML = "-";
		tr.appendChild( td );
	}

	document.getElementById( "calender" ).appendChild( tr );

};
function clearCalender()
{
	var cal = document.getElementById( "calender" );
	
	var rowCount = cal.childNodes.length;
	var i = 0;

	for( i = 1; i < rowCount; i++ )
	{
		cal.removeChild(cal.childNodes.item(1));
	}
};
function onLastMonth()
{
	month--;
	if( month < 0 )
	{
		month = 11;
		year--;
	}
	cal(year, month, 1);
};
function onNextMonth()
{
	month++;
	if( 11 < month )
	{
		month = 0;
		year++;
	}
	cal(year, month, 1);
};
function load()
{
	var today = new Date();

	year = today.getFullYear();
	month = today.getMonth();
	day = today.getDate();
	
	var weekList = [ "日", "月", "火", "水", "木", "金", "土" ];
	
	var msg = "今日は、" + year + "年" + (month + 1) + "月" + day + "日（" + weekList[today.getDay()] + "）です。";
	document.getElementById( "message" ).innerHTML = msg;

	cal(year, month, day);

};
window.onload = load;

と、html部分は以下のような感じで。

<body>
<p id="message"></p>
<p id="calDate"></p>
<table id="calender" border="1">
</table>
<div>
<button id="lastMonth" type="button" onclick="onLastMonth();">先月</button><button id="nextMonth type="button" onclick="onNextMonth();">来月</button>
</body>

べたなjavascriptなので実用向きではないですが、一応それっぽく動きます。
日付処理でちょっとここは勘違いしそうだな、と思ったところは

getMonth()が月-1で返ってくる。（例： 6月→5）
Dateのコンストラクタに日付0で渡すと前月の末日を返す。（例：　6月0日→5月31日）

ですね。２つ目は便利だけど、きちんと仕様を確認しないとうるう日とかどうなってるのか分かりません。2016年の2月29日は表示されてますけどね。

先日ブックマークを集めていた日付関連のサイトについたコメントを見たら日付関連のライブラリがあるようなので、次回はそれに対応したバージョンを作ってみようと思います。

今日はこの辺で。