다연이네

[days04] 달력 만들기 본문

Web/JavaScript

[days04] 달력 만들기

　다연　 2020. 12. 14. 21:05
반응형

1번 버튼을 누르면 해당 연,월의 달력으로 이동하며, 일 리스트에는 해당 월의 마지막 일까지만 존재한다.(2월은 28일까지)

2번 버튼을 누르면 -1월 또는 +1월된 달력으로 이동한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<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;
     cursor: pointer;
   }
   
   .month .next {
     float: right;
     padding-top: 10px;
     cursor: pointer;
   }
   
   .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>

</head>
<body>

<!-- select#cmbyear+select#cmbmonth+select#cmbdate -->
<select name="" id="cmbyear" onchange="changeDate()"></select>
<select name="" id="cmbmonth" onchange="changeDate()"></select>
<select name="" id="cmbdate"></select>


<div class="month">      
  <ul>
    <li class="prev" onclick="changeCalendar(-1)">&#10094;</li> <!-- -1: 현재날짜에서 한달 빼야하니까 -->
    <li class="next"  onclick="changeCalendar(1)">&#10095;</li>
    <li>
      <span id="month">August</span><br>
      <span id="year" style="font-size:18px">2017</span>
    </li>
  </ul>
</div>
<ul class="weekdays">  
  <li>Su</li>
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
</ul>
<ul class="days">   
<!--   
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>  
 -->
</ul>

<script>
function getLastDay(year, month){
	var d = new Date(year, month);
	d.setDate(0); // 하루빠진날짜가 출력됨
	return d.getDate();
}


function getDayOfWeek(year, month, day) { //요일 가져오는 함수
	var d = new Date(year, month-1, day);
	return d.getDay(); //0(일)~6(토)
}

</script>

<script>
var now =new Date();
var now_year = now.getFullYear(); //2020년
var now_month = now.getMonth()+1; //12월
var now_date = now.getDate(); //14일

var spn_year = document.getElementById("year"); //맨위에 제목(월)
var spn_month= document.getElementById("month"); 
var ul_days= document.querySelector("ul.days"); 
//var ul_days= document.getElementByClassName("days")[0]; //NodeList 

spn_year.innerHTML= now_year;
spn_month.innerHTML=now_month;

function printCalendar(year, month) {
	var lastDay = getLastDay(year, month);
	var dayOfWeek = getDayOfWeek(year, month, 1);
	console.log(dayOfWeek);
	ul_days.innerHTML="";//초기화
	//1(화) 위치.. [2]
	for (var i = 0; i < dayOfWeek; i++) {
		var li_day = document.createElement("li");
		ul_days.appendChild(li_day);
	}
	//1~ 마지막 날짜
	for (var i = 1; i <=lastDay; i++) {
		var li_day = document.createElement("li");
		var li_day_text = document.createTextNode(i);
		
		//14일만 비교 -- [if문 조건 변경]
		if(i==now_date ){ //오늘날짜
			var li_day_spn = document.createElement("span");
			li_day_spn.setAttribute("class", "active");
			li_day_spn.appendChild(li_day_text);//span의 자식으로 text
			li_day.appendChild(li_day_spn);
		}else{
			li_day.appendChild(li_day_text);
		}
		
		ul_days.appendChild(li_day);
	}
}
</script>
<script>
	printCalendar(now_year, now_month);
</script>

<script>
function changeCalendar(value) {//-1 또는 1
	//now_year, now_month
	//spn_year.innerHTML, spn_month.innerHTML
	//어디서 읽어오든 상관 없을 듯
	var year = spn_year.innerHTML;
	var month = parseInt(spn_month.innerHTML)+value; 
	//13 12월+1 	  1 년도1증가
	//0   1월-1 		  12 년도1감소
	if(month==0){
		year--;
		month=12;
	}else if(month ==13){
		year++;
		month=1;
	}
	spn_year.innerHTML = year;
	spn_month.innerHTML=month;
	
	printCalendar(year, month); //연도와 계산된 month를 가지고 다시 그리기
}
</script>

<script>
var cmbyear = document.querySelector("#cmbyear");
var cmbmonth = document.querySelector("#cmbmonth");
var cmbdate = document.querySelector("#cmbdate");

//연도 채우는 작업
for (var y= 1970; y<2050; y++) {
	//<option value="value" selected> text </option>
	//new Option(text[, value, defaultselected, selected]);
	if(y==now_year){ 
		cmbyear.options[y-1970] = new Option(y,y,true, true);  //2020이 기본 selected 되어짐
		//그냥 y주면 0~1966까지 빈 공백 들어감
	}else{
		cmbyear.options[y-1970] = new Option(y,y); 
	}
	
}

//월 채우는 작업
for (var m = 1; m <=12; m++) {
	cmbmonth.options[m-1] = new Option(m+"월", m);
}
cmbmonth.selectedIndex = now_month-1; //인덱스값이니 1빼기
//인덱스값을 선택하겠단 의미, 이게 위(if~else)보다 좋은 코딩

//일 채우는 작업
function setCmbDate(year, month) {
	var lastDay =  getLastDay(year, month);
	
	//cmbdate.innerHTML=""; //채워넣기전에 지우기
	//다른방법으로 제거하기
	//cmbdate.options=null;
	//cmbdate.options.length=0;
	cmbdate.length=0;
	
	for (var d = 1; d <=lastDay; d++) {
		cmbdate.options[d-1] = new Option(d,d);
	}
	cmbdate.selectedIndex = now_date-1;
}

setCmbDate(now_year,now_month);
</script>
<script>
	function changeDate() {
		var year = cmbyear.value;
		var month = cmbmonth.value;
		
		setCmbDate(year,month);
		printCalendar(year, month);
		
		spn_year.innerHTML=year; //위에 큰 연도 바꾸기
		spn_month.innerHTML=month;
		
	}
</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days04] .css().removeClass()/.addClass(), .eq()  (0) 2020.12.14
[days04] 함수의 매개변수  (0) 2020.12.14
[days04] js 날짜 객체 : Date  (0) 2020.12.14
[days04] 동적으로 컨트롤 생성하기  (0) 2020.12.14
[days04] 계산기 만들기  (0) 2020.12.14
'Web/JavaScript' Related Articles more
Comments