일반 달력처럼 현재 월에 첫주에 이전달을 넣어보기도 해보고 공백으로도 표시 해보자

🎈달력 예제

기본 예제로 table을 생성하여 달력을 입력하는 방식입니다

function calendar(y,m) {
	let date = new Date(y,m-1,1);
	
	y = date.getFullYear();
	m = date.getMonth()+1;	
	let w = date.getDay();// 요일 0~6
	
	let week = ['일','월','화','수','목','금','토',];
	
	//시스템 오늘 날짜
	let now = new Date();
	let ny = now.getFullYear();
	let nm = now.getMonth()+1;
	let nd = now.getDate();
	
	//상단 년 월 출력및 월변경 가능
	let out = '<div class = "subject">';
	out+='<span onclick = "calendar('+y+','+(m-1)+')"> &lt;</span> &nbsp;&nbsp;';
	out+= '<label>'+y+'년 '+m+'월 '+'</label>';
	out+='&nbsp;&nbsp; <spantoken operator">+y+','+(m+1)+')">&gt;</span>';
	out+='</div>';
	
	//요일 및 일 출력
	out+='<table>';
	out+='<tr>';
	
	// 배열을 이용하여 요일을 출력
	for(let i=0; i<week.length; i++){		
		out +='<td>'+week[i]+'</td>';
	}
	out +='</tr>';
	// 1일 앞부분 처리
	out+='<tr>';
	
// nbsp;: 공백
//	for(let i=0; i<w; i++){		
//		out +='<td>&nbsp;</td>';
//	}
	
	// 전월일 출력
	let before = (new Date(y,m-1,0)).getDate();
	before = before-w+1; // 1추가 요일은 0~6이므로 추가함 
						//w 을 건들기엔 아래에서 사용하여 추가
		
	for(let i=0; i<w; i++){		
		out +='<td class="gray">'+(before+i)+'</td>';
	}
	
	let lastDay = (new Date(y,m,0)).getDate();
	let cls;
	
	for(let i=1; i<=lastDay; i++){		
		console.log("start");
		cls = '';
		if(y==ny&&m==nm&&i==nd) cls=' today ';
		out += '<td class ="'+cls+'">'+i+"</td>";
		
		if(i != lastDay&& ++w%7==0){
			out+="</tr><tr>"
		}
		console.log(w);
	}
	
//	for(let i=w%7; i<6; i++){
//		out +='<td>&nbsp;</td>';
//	}

	let cnt = 0;
	for(let i=w%7; i<6; i++){
		out +='<td class="gray">'+(++cnt)+'</td>';
	}
	
	out +='</tr>';
	
	out+='</table>';
	
	
	//오늘날짜로 바로가기
	
	out+='<div class="subject" style="text-align: right;">';
	out+='<span onclick = "calendar('+ny+','+nm+')"> 오늘날짜로</span>';
	out+='</div>';
	
	
	
	document.getElementById("calendarLayout").innerHTML = out;
	// 지정된id에 태그 추가
}

페이지 load시 실행

window.onload= function(){
//페이지 로드후 실행 사용시 js부분이 html위에 있어도 실행됨	
	
	let now = new Date();
	let y = now.getFullYear();
	let m = now.getMonth()+1;
	calendar(y,m);
	
};

🎈쓰면서

HTML 요소를 추가하는데 문자열을 사용해서 해봣는데 생각보다 너무 불편하다 (2번이나 오류가나왔다...)
이제부터 쓸때 좀더 주의를 하면서 써야지

🎈마치며

오늘은 javascript 밤새 공부하면서 달력!