ywork2020.com

Title

javascriptでインタラクティブなWebページが作成できる

javascriptカレンダーの実機サンプル

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>ヒント : カレンダー | 独学 Webプログラミング! - YWORK</title>
		<style>
			table,th,td{
				border:1px;
				border-color: #000;
				border-style:solid;
				padding: 10px;
				border-collapse: collapse;
			}
			td{text-align: right;}
		</style>
	</head>
	<body>
		<script>

			let objDate = new Date();
			let vArrDay = new Array("日","月","火","水","木","金","土");
			let vtdid = 0;

			//----------------------------------------------------------何月のカレンダー表示
			document.write('<p = id="p1"></p>');
			//----------------------------------------------------------曜日表示
			document.write("<table><tr>");
			for(let i=0;i<7;i++){
				document.write("<th>" + vArrDay[i] + "</th>");
			}
			document.write("</tr>");
			//----------------------------------------------------------6週*7日の表を作成(IDオートナンバー)
			for(let j=0;j<6;j++){
				document.write("<tr>");
				for(i=0;i<7;i++){
					document.write('<td id="tdid'+ vtdid + '"></td>');
					vtdid = vtdid + 1;
				}
				document.write("</tr>");
			}
			document.write("</table><br>");
			//scriptでボタンを表示しなくても普通にHTMLで作成してもOK! 気分でJSで書いてみただけです
			document.write('<input type="button" value="前月" id="funPrev"> ');
			document.write('<input type="button" value="次月" id="funNext">');
		
			//----------------------------------------------------------今月
			document.getElementById("p1").innerHTML = objDate.getFullYear() + '年' + (objDate.getMonth() + 1) + ' 月のカレンダー<br>';
			j = 1;																		//1日からカウントする為だけの変数
			objDate.setDate(1);
			let vEndDate = new Date(objDate.getFullYear(),objDate.getMonth() + 1, 0);	//今月末日取得
			for(let x=0;x<42;x++){														//表の値を初期化
				document.getElementById("tdid" + x).innerHTML = " ";
			}
			for(i=objDate.getDay();i<vEndDate.getDate() + objDate.getDay();i++){
				document.getElementById("tdid" + i).innerHTML = j;
				j = j + 1;
			}
			
			//----------------------------------------------------------前月
			document.getElementById("funPrev").onclick = function(){
				objDate.setMonth(objDate.getMonth() -1 );
				document.getElementById("p1").innerHTML = objDate.getFullYear() + '年' + (objDate.getMonth() + 1) + ' 月のカレンダー<br>';
				j = 1;																		//1日からカウントする為だけの変数
				objDate.setDate(1);
				let vEndDate = new Date(objDate.getFullYear(),objDate.getMonth() + 1, 0);	//今月末日取
				for(let x=0;x<42;x++){														//表の値を初期化
					document.getElementById("tdid" + x).innerHTML = " ";
				}
				for(i=objDate.getDay();i<vEndDate.getDate() + objDate.getDay();i++){
					document.getElementById("tdid" + i).innerHTML = j;
					j = j + 1;
				}
			}

			//----------------------------------------------------------次月
			document.getElementById("funNext").onclick = function (){
				objDate.setMonth(objDate.getMonth() +1 );
				document.getElementById("p1").innerHTML = objDate.getFullYear() + '年' + (objDate.getMonth() + 1) + ' 月のカレンダー<br>';
				j = 1;																		//1日からカウントする為だけの変数
				objDate.setDate(1);
				let vEndDate = new Date(objDate.getFullYear(),objDate.getMonth() + 1, 0);	//今月末日取得
				for(let x=0;x<42;x++){														//表の値を初期化
					document.getElementById("tdid" + x).innerHTML = " ";
				}
				for(i=objDate.getDay();i<vEndDate.getDate() + objDate.getDay();i++){
					document.getElementById("tdid" + i).innerHTML = j;
					j = j + 1;
				}
			}

		</script>
	</body>
</html>