DOJEUN's Notepad
 LISTへ 

【Javascript】カレンダー(基本)-現在日付のカレンダー

カレンダー(基本)-現在日付のカレンダー


以下のhtmlソースを試して見てください。

<html>
<head><title>Javascript-カレンダー(基本)-現在日付のカレンダー</title>
<script type="text/javascript">
<!--
function calendar(){
	var vToday = new Date();
	var vWeekTbl = new Array("日","月","火","水","木","金","土");
	var vMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);

	var vYear = vToday.getYear();
	vYear = (vYear<2000) ? (1900+vYear) : (vYear);
	if (((vYear%4)==0 && (vYear%100)!=0) || (vYear%400)==0) // うるう年チェック
		vMonthTbl[1] = 29;

	var vMonth = vToday.getMonth();
	var vCurrentDay = vToday.getDate();
	vToday.setDate(1);
	vWeek = vToday.getDay();
	var vTblLine = Math.ceil((vWeek+vMonthTbl[vMonth])/7);     // カレンダーの行数
	vTable   = new Array(7*vTblLine);
	for(i=0; i < 7 * vTblLine; i++) vTable[i] = " ";              // vTableを掃除する
	for(i=0; i < vMonthTbl[vMonth]; i++) vTable[i+vWeek] = i+1;

	var vTbl = document.createElement("TABLE");
	vTbl.setAttribute("border",1);
	vTbl.setAttribute("cellSpacing",0);
	vTbl.setAttribute("borderColor","#808080");
	vTbl.setAttribute("borderColordark","##000000");
	vTbl.setAttribute("borderColorlight","#C0C0C0");

	var vTBody = document.createElement("TBODY");

	//--> TITLE START
	var vTR = document.createElement("TR");
	var vTD = document.createElement("TD");
	vTD.setAttribute("align","center");
	vTD.setAttribute("colSpan","7");
	vTD.setAttribute("bgColor","#7fffd4");
	var vTD_Text = document.createTextNode(vYear + "年" + (vMonth+1) + "月カレンダー");
	vTD.appendChild(vTD_Text);
	vTR.appendChild(vTD);
	vTBody.appendChild(vTR);
	//<-- TITLE END
	//--> 曜日START
	vTR = document.createElement("TR");
	for(i=0; i < vWeekTbl.length; i++){
		vTD = document.createElement("TD");
		if(i == 6) vTD.style.color="blue";
		if(i == 0) vTD.style.color="red";
		vTD.setAttribute("align","center");
		vTD.appendChild(document.createTextNode(vWeekTbl[i]));
		vTR.appendChild(vTD);
	}
	vTBody.appendChild(vTR);
	//<-- 曜日END
	//--> カレンダーSTART
	for(i=0; i < vTblLine; i++){
		vTR = document.createElement("TR");
		for(j=0; j < 7; j++){
			vTD = document.createElement("TD");
			if(j == 6) vTD.style.color="blue";
			if(j == 0) vTD.style.color="red";
			vTD.setAttribute("align","center");
			vTD_Text = document.createTextNode(vTable[j+(i*7)]);
			if(vCurrentDay == vTable[j+(i*7)]) vTD.setAttribute("bgColor","yellow");
			vTD.appendChild(vTD_Text);
			vTR.appendChild(vTD);
		}
		vTBody.appendChild(vTR);
	}
	//<-- カレンダーEND
	vTbl.appendChild(vTBody);
	divCalendar.appendChild(vTbl);
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" onLoad="calendar()">
<div id="divCalendar"></div>
</body>
</html>