Dog foot print

[javaScript] 추억의 javascript로 달력 만들기(2) 본문

Javascript

[javaScript] 추억의 javascript로 달력 만들기(2)

개 발자국 2019. 7. 25. 00:55

전 포스팅에서 prevMonth , nextMonth 버튼을 구현하지 않았는데 해당 버튼과 토,일의 스타일을 구현 하도록 해보겠다. 

 

buildCalendar 수정하기

prevMonth와 nextMonth에서 today만 변경해서 buildCalendar에서 알아서 변경하게 하고 싶어 전역변수 몇 개를 buildCalendar내부로 옮겼다.. 그리고 기존의 buildCalendar에서 일부 달의 경우 setDays가 아직 lastDate에 도달하지 못했음에도 row를 못 만들었기 때문에 함수끝에 제어문을 두도록 변경했다. 

 

 

function buildCalendar(){
			let firstDate = new Date(todayYear, todayMonth-1,1);
			let lastDate = new Date(todayYear, todayMonth,0);
			let day = firstDate.getDay();
			let week = Math.ceil(lastDate.getDate()/7) + 1;
			let today_yearMonth = todayYear + " - " + todayMonth;
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			let nextMonthDate = 1;
			console.log(lastDate);
			for(i = 1; i < week; i++){
				let row = calendar.insertRow();
				while(day != 0){
					row.insertCell().innerHTML = "";
					day -= 1;
					leftDays -= 1;
				} // 1주
				while(leftDays != 0){
					if(setDays > lastDate.getDate()){
						row.insertCell().innerHTML = nextMonthDate;
						leftDays -= 1;
						nextMonthDate += 1;
					}else{
						row.insertCell().innerHTML = setDays;
						setDays +=1;
						leftDays -= 1;
					}
				}
				leftDays = 7;
			}
			setDays -=1;
			if(setDays != lastDate.getDate()){
				let row = calendar.insertRow();
				while(setDays != lastDate.getDate()){
					setDays++;
					leftDays--;
					row.insertCell().innerHTML = setDays;
				}
				while(leftDays != 0){
					row.insertCell().innerHTML = nextMonthDate;
					nextMonthDate++;
					leftDays--;
				}
			}
			document.getElementById("yearMonth").innerHTML= today_yearMonth;
		}

 

행 지우기

buildCalender를 다시 불러내기 위해서는 기존에 있었던 행들을 모조리 지워줘야 한다. 지워주지 않으면 기존 달력 아래에 다른 달력이 생겨난다. 

function deleteCalendar(){
			while(calendar.rows.length > 2){ 
				calendar.deleteRow(2); // 특정 행만 지우도록 하는 메서드 
			}
		}

 

 

버튼에 deleteCalendar()함수를 onClick 속성에 추가하여 클릭했을 때 

 

prevMonth 와 nextMonth 만들기

todayYear와 , todayMonth를 가져와 today 전역변수를 전달 혹은 다음달로 세팅한 후 다시 todayYear와 todayMonth 를 바뀐 달로 할당하여야 한다. 

 

function prevMonth(){
			todayMonth = todayMonth -1;
			if(todayMonth == 0){
				todayMonth = 12;
				todayYear -= 1;
			}
			deleteCalendar();
			today = new Date(todayYear,todayMonth-1);
			buildCalendar();
		}
		function nextMonth(){
			todayMonth +=1;
			if(todayMonth == 13){
				todayMonth = 1;
				todayYear = todayYear +1;
			}
			deleteCalendar();
			today = new Date(todayYear,todayMonth - 1);			
			buildCalendar();
		}

 

button에 연결하기

<tr id="mainBar">
	<td id="preventMonth" colspan="1"><input type="button" id="preventMonth_Button" onclick="prevMonth()"></td>
	<td id="yearMonth" colspan="5"></td>
	<td id="nextMonth" colspan="1"><input type="button" id="nextMonth_Button" onclick="nextMonth()"></td>
</tr>

 

일요일과 토요일 스타일 주기 

해당 insertCell()에 대하여 한번더 메서드체이닝은 할 수 없으니 css로 tr의 일요일은 red, 토요일은 blue로 주도록 하겠다.

tr td:nth-child(1){
   color: red;
}
tr td:nth-child(7){
   color: blue;
}

전체

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>calendar</title>
	<style>
		
		td{
			width: 50px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            font-family: 굴림;
            border:2px solid;
			border-color: black;
            border-radius : 8px;/*모서리 둥글게*/
		}
		
		#yearMonth{
			width: 250px;
		}
		tr td:nth-child(1){
			color: red;
		}
		tr td:nth-child(7){
			color: blue;
		}

	</style>
	
</head>
<body>
		<table id="calendar_table" >
			<tr id="mainBar">
				<td id="preventMonth" colspan="1"><input type="button" id="preventMonth_Button" onclick="prevMonth()"></td>
				<td id="yearMonth" colspan="5"></td>
				<td id="nextMonth" colspan="1"><input type="button" id="nextMonth_Button" onclick="nextMonth()"></td>
			</tr>
			<tr>
				<td>일</td>
				<td>월</td>
				<td>화</td>
				<td>수</td>
				<td>목</td>
				<td>금</td>
				<td>토</td>
			</tr>
		</table>

	
	<script>
		let today = new Date();
		
		let todayYear = today.getFullYear();
		let todayMonth = today.getMonth() +1;
		console.log(todayMonth)
		let calendar = document.getElementById("calendar_table");

		function buildCalendar(){
			let firstDate = new Date(todayYear, todayMonth-1,1);
			let lastDate = new Date(todayYear, todayMonth,0);
			let day = firstDate.getDay();
			let week = Math.ceil(lastDate.getDate()/7) + 1;
			let today_yearMonth = todayYear + " - " + todayMonth;
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			let nextMonthDate = 1;
			console.log(lastDate);
			for(i = 1; i < week; i++){
				let row = calendar.insertRow();
				while(day != 0){
					row.insertCell().innerHTML = "";
					day -= 1;
					leftDays -= 1;
				} // 1주
				while(leftDays != 0){
					if(setDays > lastDate.getDate()){
						row.insertCell().innerHTML = nextMonthDate;
						leftDays -= 1;
						nextMonthDate += 1;
					}else{
						row.insertCell().innerHTML = setDays;
						setDays +=1;
						leftDays -= 1;
					}
				}
				leftDays = 7;
			}
			setDays -=1;
			if(setDays != lastDate.getDate()){
				let row = calendar.insertRow();
				while(setDays != lastDate.getDate()){
					setDays++;
					leftDays--;
					row.insertCell().innerHTML = setDays;
				}
				while(leftDays != 0){
					row.insertCell().innerHTML = nextMonthDate;
					nextMonthDate++;
					leftDays--;
				}
			}
			document.getElementById("yearMonth").innerHTML= today_yearMonth;
		}
		buildCalendar();

		function deleteCalendar(){
			while(calendar.rows.length > 2){
				calendar.deleteRow(2);
			}
		}

		function prevMonth(){
			todayMonth = todayMonth -1;
			if(todayMonth == 0){
				todayMonth = 12;
				todayYear -= 1;
			}
			deleteCalendar();
			today = new Date(todayYear,todayMonth-1);
			buildCalendar();
		}
		function nextMonth(){
			todayMonth +=1;
			if(todayMonth == 13){
				todayMonth = 1;
				todayYear = todayYear +1;
			}
			deleteCalendar();
			today = new Date(todayYear,todayMonth - 1);			
			buildCalendar();
		}
	</script>
</body>
</html>

 

정리하며

date객체 관련 라이브러리를 사용하면 이보다 훨씬 편하게 달력을 만들 수 있다. 

반응형

'Javascript' 카테고리의 다른 글

[javascript] 이중연결리스트  (0) 2019.07.26
[javascript] 원형연결리스트 만들기  (0) 2019.07.25
[javascript] 추억의 javascript로 달력 만들기 (1)  (10) 2019.07.24
[javascript] 정규표현식이란 ?  (0) 2019.07.19
[javascript] 단순 연결리스트 만들기 linked-list  (0) 2019.07.18
'Javascript' Related Articles more
Comments