[SIST] Web_javascript_days05_달력 만들기

1) 마지막 날짜와 1일이 무슨요일인지 가져오기

 

2) 오늘 날짜에 span 태그로 묶기

 

3) select 태그에 년도, 월, 일 채우기

 

ㄱ. 년도 채우기

년도는 1970년 ~ 2050년까지 채우고

Options 객체의 new Option을 사용하여 select 태그에 옵션 값을 채워넣었다.

만약 년도가 오늘 날짜의 년도와 동일하다면 new Option으로 selected 속성을 추가하였다.

 

ㄴ. 월 채우기

오늘 날짜에 해당하는 월이면 selected 속성을 추가한다.

 

ㄷ. 일 채우기

해당 월의 일을 채우기 위해서는 마지막 날짜를 구해와서 for 문을 돌려야 한다.

오늘 날짜에 해당하는 일이면 selected 속성을 추가한다.

 

4) select 태그의 change 이벤트가 일어날 때 기존에 있던 옵션 값들 삭제하기

삭제하는 이유?

만약, 내가 7월을 선택하면 7월은 31일까지 있어 옵션 값이 31일 까지 생성이 된다. 그 후에 다시 6월을 선택했을 때 6월은 30일까지 있어 30일까지 생성하게 되는데 6월을 선택하여 30일까지 새로 생성하여도 7월에 생성했던 31일 옵션 값이 남아있기 때문에 이전에 있던 option 태그를 다 삭제하여야 한다.

---

달력만드는 전체 코드

[style 태그의 css]

<style>
    select {
       width: 100px;
       text-align: center;
    }

    * {
       box-sizing: border-box;
    }

    ul {
       list-style-type: none;
    }

    body {
       font-family: Verdana, sans-serif;
    }

    .month {
       padding: 70px 25px;
       width: 100%;
       background: #1abc9c;
       text-align: center;
    }

    .month ul {
       margin: 0;
       padding: 0;
    }

    .month ul li {
       color: white;
       font-size: 20px;
       text-transform: uppercase;
       letter-spacing: 3px;
    }

    .month .prev {
       float: left;
       padding-top: 10px;
    }

    .month .next {
       float: right;
       padding-top: 10px;
    }

    .weekdays {
       margin: 0;
       padding: 10px 0;
       background-color: #ddd;
    }

    .weekdays li {
       display: inline-block;
       width: 13.6%;
       color: #666;
       text-align: center;
    }

    .days {
       padding: 10px 0;
       background: #eee;
       margin: 0;
    }

    .days li {
       list-style-type: none;
       display: inline-block;
       width: 13.6%;
       text-align: center;
       margin-bottom: 5px;
       font-size: 12px;
       color: #777;
    }

    .days li .active {
       padding: 5px;
       background: #1abc9c;
       color: white !important
    }
</style>

 

[body태그의 뼈대]

 

[script 코딩 - javascript]

<script>
	// 마지막 날짜 구하기
	function getLastDay(year, month) {
		var d = new Date(year, month);
		d.setDate(0); // Tip! setDate에 0을 주면 하루를 뺀다.
		return d.getDate(); // 30
	}
	
    // 1일은 무슨요일인지 구하기
	function getDayOfWeek(year, month, day){
		// 주의! 월은 1월(0) ~ 12월(11)
		var d = new Date(year, month-1, day);
		return d.getDay(); // 0(일),1(월) ~ 6(토)
	}
	
	// 달력 그리기 함수
	function printCalendar(year, month){
		// 이전에 생성된 li 태그들 제거
		ulDays.innerHTML = "";
		
		// 마지막 날짜와 요일 가져오기
		var lastday = getLastDay(year, month);
		var dayOfWeek = getDayOfWeek(year, month, 1);
		
		// dayOfWeek 만큼 빈 공간을 li태그로 만들어줌
		// ex) 수요일이라 3이 오면 앞에 3칸을 띄우고 수요일에 1일을 찍기 위한 작업
		for (var i = 0; i < dayOfWeek; i++) {
			var liDay = document.createElement("li");
			ulDays.appendChild(liDay);
		} // for
		
		// 1일부터 마지막 날짜(lastday)까지 li 태그 만들어서 찍기
		for (var d = 1; d <= lastday; d++) {
			var li_day = document.createElement("li");
			// 오늘 날짜가 3일이라면.. <li><span class="active">3</span></li>
			// li_day.innerText = d;
			var li_day_text = document.createTextNode(d);
			if (d == nowDate) {
				var li_span = document.createElement("span"); // <span></span>
				li_span.setAttribute("class", "active"); // <span class="active"></span>
				li_span.appendChild(li_day_text); // <span class="active">3</span>
				li_day.appendChild(li_span); // <li><span class="active"></span></li>
			} else{
				li_day.appendChild(li_day_text); /* <li>d</li> */
			}
					
			ulDays.appendChild(li_day);
		} // for
	} // printCalendar 함수
	
	printCalendar(nowYear, nowMonth); // 함수 호출
</script>

<script>
	// cmbyear 채우기(년도 채우기)
	var cmbyear = document.getElementById("cmbyear");
	for (var y = 1970; y <= 2050; y++) {
		// js에서 Option 객체 - new Option(텍스트값, 밸류값);
		// cmbyear.options[0] = new Option(1970, 1970);
		// cmbyear.options[1] = new Option(1971, 1971);
		
		// js selected Option 객체 - 선택된 옵션 객체	: Option(text, value, defaultSelected, selected);
		if(y == 2022){
			cmbyear.options[y-1970] = new Option(y, y, true, true); // 2022년도에만 selected 속성 주어짐
		} else{
			cmbyear.options[y-1970] = new Option(y, y);
		}
	} // for
	
	// cmbmonth 채우기
	var cmbmonth = document.getElementById("cmbmonth");
	for (var m = 1; m <= 12; m++) {
		cmbmonth.options[m-1] = new Option(m, m);
	}
	cmbmonth.selectedIndex = 6-1; // selected 속성 주기
	
	// cmbdate 채우기
	function getLastDay(year, month) {
		var d = new Date(year, month);
		d.setDate(0); // Tip! setDate에 0을 주면 하루를 뺀다.
		return d.getDate(); 
	} // getLastDay
	
	var cmbdate = document.getElementById("cmbdate");
	var lastday = getLastDay(2022, 6);
	for (var d = 1; d <= lastday; d++) {
		cmbdate.options[d-1] = new Option(d, d);
	} // for
	cmbdate.selectedIndex = 3-1; // selected 속성 주기
</script>