JSFiddle - React, Tailwind, and code Playground

by wjddyd66

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>달력만들기</title>
<script type="text/javascript">

var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
console.log(month);
var day=now.getDate();

window.onload=function(){
	document.getElementById("btnShow").addEventListener("click", func, false);
	
	document.getElementById("btnPyear").onclick=function(){
		year--;
		func();
	}
	document.getElementById("btnPmonth").onclick=function(){
		month--;
		if(month===0){
			month=12;
			year--;
		} 
		func();
	}
	document.getElementById("btnNmonth").onclick=function(){
		month++;
		if(month===13){
			month=1;
			year++;
		}
		func();
	}
	document.getElementById("btnNyear").onclick=function(){
		year++;
		func();
	}
}

function func(){
	// alert(year+" "+(month)+" "+day);
	// 해당 달의 1일은 무슨 요일?
	var setDate=new Date(year, month-1, 1);
	// alert(setDate);
	var firstDay=setDate.getDate();
	// alert(firstDay);
	var yoil=setDate.getDay();
	// alert(yoil);
	// 일요일:0~ 토요일:6
	
	//해당 달의 날 수?
	var nalsu=new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
	if(year%4===0 && year%100!==0 || year%400===0){
		nalsu[1]=29;
	}
	makeDal(yoil, nalsu[month-1], year, month, day);
	document.getElementById("disp").innerHTML=str;
}

var str=" ";
var week=new Array("일", "월", "화", "수", "목", "금", "토");

function makeDal(yoil, nalsu, year, month, day){
	str="<table border='1'>";
	str+="<tr><th colspan='7' width='250'>"+year+"년 "+month+"월 </th></tr>";
	str+="<tr>";
	for(var i=0; i<week.length; i++){
		str+="<th>"+week[i]+"</th>";
	}
	str+="</tr>"; // 년월 출력 완료
	// 날 수 만큼 숫자 채우기
	var no=1;
	var currentCell=0; // 달력 상 공백 추가시 필요한 변수
	var ju=Math.ceil((nalsu+yoil)/7); // 자르지 말고 올려붙여야 한다!
	// alert("몇 주? "+ju);
	
	for(var r=0; r<ju; r++){ // 주 (행)
		str+="<tr style='text-align: center'>";
		for(var col=0; col<7; col++){ // 일 (열)
			if(currentCell < yoil || no >nalsu){ // 예를 들어 첫주 1일이 수요일 -> 일, 월, 화는 공백처리!
				str+="<td>&nbsp;</td>";
				currentCell++;
			}...