JavaScript サンプル：『今月のカレンダーを表示してみる２』

コード

function setCalendar(years,months){
	var nowDate = new Date();
	var strWeek;
	var lastDay;
	var cntWeek;
	var years  = nowDate.getYear();
	var months = nowDate.getMonth();
	var days   = nowDate.getDate();
	if (years < 1900) { years += 1900; }
	strWeek = "<FONT color=red>日</FONT>,月,火,水,木,金,<FONT color=blue>土</FONT>"
	strWeek = strWeek.split(",");
	nowDate = new Date(years,months,1);
	cntWeek = nowDate.getDay();
	nowDate.setMonth(months + 1);
	nowDate.setDate(0);
	lastDay = nowDate.getDate();
	document.write("<TABLE border=1>");
	document.write("<TR>");
	for (tmp in strWeek) {
		document.write("<TH width=20>" + strWeek[tmp] + "<" + "/TH>");
	}
	document.write("<" + "/TR>");
	document.write("<TR>");
	setBlank(cntWeek);
	for (tmp=1;tmp<=lastDay;tmp++) {
		if (cntWeek == 0) {
			document.write("<TD align=right bgcolor=pink>");
		} else {
			document.write("<TD align=right>");
		}
		if (tmp == days) {
			document.write("<FONT color=green>",tmp,"<","/FONT>");
		} else {
			document.write(tmp);
		}
		document.write("<" + "/TD>");
		cntWeek++;
		if (cntWeek > 6 && tmp != lastDay) {
			document.write("<" + "/TR><TR>");
			cntWeek = 0;
		}
	}
	setBlank(7 - cntWeek);
	document.write("<" + "/TR><" + "/TABLE>");
}
function setBlank(cnt){
	for (index=0;index<cnt;index++) {
		document.write("<TD><BR><","/TD>");
	}
}

<SCRIPT language="JavaScript">
<!--
setCalendar();
// -->
</SCRIPT>

解説＆ステップアップ

実際のコードでは、日曜日の背景をピンクにするのに「style="background-color:pink;"」とスタイルシートを使用しています。これは、ページ全体のレイアウトをスタイルシートで定義してしまっているため、「bgcolor」では、色が変わらないからです。とくにスタイルシートを指定していないページならば、上記のコードでも問題はありません。