Dog foot print

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

Javascript

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

개 발자국 2019. 7. 24. 22:03

 

작년에 자바스크립트를 만지면서 dom을 가지고 뭘 만들어 볼 수 있으려나 싶어서 만들어 본 것이 달력만들기였다. Date객체만을 이용해서 달력을 만들었는데 이런 생 노가다가 없었다. 지금이야 React moment 라이브러리를 이용해서 쉽게 만들지만 그때는 꽤나 힘들었다... 그래서 삽질의 과정을 포스팅 해보려 한다. 

 

틀 만들기

 

목업 design

 

틀은 div가 아닌 table로 만들 것이다. 

 

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

 

 

html 결과

 

style 추가하기

html의 결과가 조금 구리니 callender td에 style 을 추가하자 

 

 

td{
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-family: 굴림;
    border:2px;
    border-color:black;
    border-radius : 8px;/*모서리 둥글게*/
}
		
#yearMonth{
    width: 250px;
}

 

결과

 

구리긴 매 한가지긴 하지만 그래도 각 td의 경계가 명확해졌다. 

 

현재 연도 및 월 표시 

 

현재 시간을 알기 위해서 Date 객체를 이용해야 한다. Date객체의 생성자 인자로는 "연도 , 월, 일, 시, 분, 초, milliSecond" 를 넣어 객체의 시간을 세팅 할 수 있으며 ".getMonth() , .getFullYear() " 같은 메서드로 해당 객체에서 연도와 월 일을 추출하는 것도 가능하다. 

 

let today = new Date(); //현재의 날짜

todayYear = today.getFullYear();

todayMonth = today.getMonth() + 1; // 월은 0부터 시작하기때문에 + 1을 해줘야지 해당 달의 월이 나온다.
		
today_yearMonth = todayYear + " - " + todayMonth;
	
document.getElementById("yearMonth").innerHTML= today_yearMonth;

let firstDate = new Date(today.getFullYear(), today.getMonth(),1);
let lastDate = new Date(today.getFullYear(), today.getMonth()+1,0);
let day = firstDate.getDay();
let calendar = document.getElementById("calendar_table");
let week = Math.ceil(lastDate.getDate()/7) + 1;

 

첫 주 전 달의 빈공간 구현하기

매달 1일이 월요일 부터 시작하는 것이 아니니 해당 1일의 요일전까지는 "" td에 날짜가 없어야 한다. 그러기 위하여 출력하는 달의 1일의 요일을 얻기위하여 ".getDay()" 메소드를 사용한다. 

 

function buildCalendar(){
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			for(i = 1; i < week; i++){
				let row = calendar.insertRow();
				while(day != 0){
					row.insertCell().innerHTML = "";
					day -= 1;
					leftDays -= 1;
				} // 1주의 전달은 공백으로 표시
			}
		}
        
 buildCalendar()

 

 

해당 달의 달력 구현하기

이제 한 주가 돌아 갈때마다 각 셀에 setDays 를 넣어주기만 하면된다. 

 

function buildCalender(){
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			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 = "";
						leftDays -= 1;
					}else{
						row.insertCell().innerHTML = setDays;
						setDays +=1;
						leftDays -= 1;
					}
				}
				leftDays = 7;
			}
		}

 

현 7월의 달력이 출력되는 모습 

 

마지막 날 이후 다음 달 추가하기

setDays 가 해당 달의 마지막 날 이후부터 넣으면 되니까 nextMonthDate를 전역으로 두고 

function buildCalendar(){
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			for(i = 1; i < week; i++){
				let row = kallender.insertRow();
				while(day != 0){
					row.insertCell().innerHTML = "";
					day -= 1; 
					leftDays -= 1;
				} // 1주
				let nextMonthDate = 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;
			}
		}
		buildCallender();

 

 

전체

 

<!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;
		}

	</style>
	
</head>
<body>
		<table id="calendar_table" >
			<tr id="mainBar">
				<td id="preventMonth" colspan="1"><input type="button" id="preventMonth_Button" onclick="preventMonth()"></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;

		let today_yearMonth = todayYear + " - " + todayMonth;

		document.getElementById("yearMonth").innerHTML= today_yearMonth;
		
		let firstDate = new Date(today.getFullYear(), today.getMonth(),1);
		let lastDate = new Date(today.getFullYear(), today.getMonth()+1,0);
		let day = firstDate.getDay();
		let calendar = document.getElementById("calendar_table");
		let week = Math.ceil(lastDate.getDate()/7) + 1;
		// let row = calendar.insertRow();
		
		

		function buildCalendar(){
			let leftDays = 7; // setDays 와 반비례 
			let setDays = 1;// leftDays 와 반비례 
			for(i = 1; i < week; i++){
				let row = calendar.insertRow();
				while(day != 0){
					row.insertCell().innerHTML = "";
					day -= 1;
					leftDays -= 1;
				} // 1주
				let nextMonthDate = 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;
			}
		}
		buildCalendar();

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

 

현재까지는 preventMonth 와 nextMonth 버튼의 구현을 아직 하지 않았다. 

 

2020 - 03 -27 

안녕하십니까 여러분 블로그 주인 호키도키입니다. . 요즘 들어 블로그 관리가 좀 허술 한데, 오랜만에 이 블로그 통계를 보니 이 추억의 자바스크립트로 달력만들기 포스팅이 유독 조회수가 가장 높더군요. 약 2년전 처음으로 만든 허접한 토이프로젝트임에도 불구하고 많이들 봐주셔서 정말 감사드립니다. 

 

혹시 시간이 좀 나시는 분은 글을 보시고 이 글을 어떤 이유로 좀 들어왔는지 댓글 한번만 달아주실 수 있나요 ? ㅎㅎ 참고해주셔서 감사드립니다. 

반응형

'Javascript' 카테고리의 다른 글

[javascript] 원형연결리스트 만들기  (0) 2019.07.25
[javaScript] 추억의 javascript로 달력 만들기(2)  (0) 2019.07.25
[javascript] 정규표현식이란 ?  (0) 2019.07.19
[javascript] 단순 연결리스트 만들기 linked-list  (0) 2019.07.18
[javascript] Call By Reference , Call By Value  (0) 2019.07.17
'Javascript' Related Articles more
Comments