75. (javascript/자바스크립트) 캘린더 (calendar) 방식 Date 사용해 연도 (year), 월 (month) 확인 및 시작 요일, 종료 요일 확인

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
    	2. new Date : 연도, 월, 일자를 확인할 때 사용합니다
    	3. 로직 : 월 일자를 확인해서 1보다 작으면 12로 변경 및 연도 감소 / 12보다 크면 1로 변경 및 연도 증가    	
    	*/


    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 

    		// 날짜 확인 함수 호출
    		getDateDay(0);		
    	};


    	/* 초기 전역 변수 선언 */
    	var year = 0;
    	var month = 0;
    	var dayLabel = new Array("일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일");
    	

    	/* 날짜 확인 함수 */
    	function getDateDay(monthCalculate){ //월 더하기, 빼기 수행 실시

    		// 캘린더를 구하려는 방식을 사용하려면 초반에 무조건 현재 연도, 월 값을 요청해야한다
    		if(monthCalculate == 0){ //현재 [월]
    			console.log("");
    			var date = new Date();

    			//변수에 현재 연도, 월 값을 담습니다
    			year = date.getFullYear();
    			month = date.getMonth()+1;    			
    			console.log("[getDateDay] : [현재] : ["+year+"] : ["+month+"]");    			

    			//시작 일자 및 종료 일자를 확인    			
    			var firstLabel = String(year) + "-" + String(month) + "-" + "1";
    			var firstDayLabel = dayLabel[new Date(firstLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+"1"+"] : ["+firstDayLabel+"]"); 

    			var lastDay = String(new Date(year, month, 0).getDate());    			
    			var lastLabel = String(year) + "-" + String(month) + "-" + lastDay;
    			var lastDayLabel = dayLabel[new Date(lastLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+lastDay+"] : ["+lastDayLabel+"]"); 
    			console.log(""); 
    		}
    		if(monthCalculate == -1){ //이전 [월]
    			month = month - 1;
    			if(month < 1){
    				month = 12;
    				year = year - 1;
    			}
    			console.log("[getDateDay] : [이전] : ["+year+"] : ["+month+"]");
    			//시작 일자 및 종료 일자를 확인    			
    			var firstLabel = String(year) + "-" + String(month) + "-" + "1";
    			var firstDayLabel = dayLabel[new Date(firstLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+"1"+"] : ["+firstDayLabel+"]"); 

    			var lastDay = String(new Date(year, month, 0).getDate());    			
    			var lastLabel = String(year) + "-" + String(month) + "-" + lastDay;
    			var lastDayLabel = dayLabel[new Date(lastLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+lastDay+"] : ["+lastDayLabel+"]"); 
    			console.log(""); 
    		}
    		if(monthCalculate == +1){ //다음 [월]
    			month = month + 1;
    			if(month > 12){
    				month = 1;
    				year = year + 1;
    			}
    			console.log("[getDateDay] : [다음] : ["+year+"] : ["+month+"]");
    			//시작 일자 및 종료 일자를 확인    			
    			var firstLabel = String(year) + "-" + String(month) + "-" + "1";
    			var firstDayLabel = dayLabel[new Date(firstLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+"1"+"] : ["+firstDayLabel+"]"); 

    			var lastDay = String(new Date(year, month, 0).getDate());    			
    			var lastLabel = String(year) + "-" + String(month) + "-" + lastDay;
    			var lastDayLabel = dayLabel[new Date(lastLabel).getDay()];
    			console.log("[getDateDay] : [last] : ["+lastDay+"] : ["+lastDayLabel+"]"); 
    			console.log("");
    		}
    	};

    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다

2. new Date : 연도, 월, 일자를 확인할 때 사용합니다

3. 로직 : 월 일자를 확인해서 1보다 작으면 12로 변경 및 연도 감소 / 12보다 크면 1로 변경 및 연도 증가

*/

/* =========================== */