개발자의 끄적끄적

[javascript] 추억의 javascript로 달력 만들기 [펌] 본문

개발/javascript & jquery

[javascript] 추억의 javascript로 달력 만들기 [펌]

효벨 2020. 8. 27. 02:00
728x90
반응형

[javascript] 추억의 javascript로 달력 만들기 [펌]

 

 

javascript 달력 관련 정보를 인터넷으로 찾아보던중

 

직접 만들어서 특화된 달력을 구현해보고 싶다는 생각이 들었습니다.

 

그래서 돌아다니다가 정말 참고될만한 글이라고 생각되어 퍼왔습니다.

 

다른분들도 개발하시는데 도움들 되셨으면 좋겠네요~!

 

출처는 맨~ 아래 명시했습니다!!

 

참고들하세요!

 

 

작년에 자바스크립트를 만지면서 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 버튼의 구현을 아직 하지 않았다. 

 

 

출처 : https://hokeydokey.tistory.com/57

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 > javascript & jquery' 카테고리의 다른 글

[javascript] 현재위치에서 반경2km 내 업체들 거리, 도보/자전거 이동거리 구하기[펌]  (0) 2020.09.05
[javascript] colorpicker 참고 사이트!  (0) 2020.08.30
[javascript/jquery] 자바스크립트 기능 제작, 달력 (Javascript Calendar) [펌]  (0) 2020.08.27
[jQuery] 모바일에서 Datepicker 사용 시 키보드 올라오지 않게 하는 방법  (0) 2020.08.26
[javascript] 이메일 체크 정규식 예제  (0) 2020.08.23
'개발/javascript & jquery' Related Articles more
Comments