자스민
Javascript
[javascript] 추억의 javascript로 달력 만들기 (1)
호키도키 2019. 7. 24. 22:03
작년에 자바스크립트를 만지면서 dom을 가지고 뭘 만들어 볼 수 있으려나 싶어서 만들어 본 것이 달력만들기였다. Date객체만을 이용해서 달력을 만들었는데 이런 생 노가다가 없었다. 지금이야 React moment 라이브러리를 이용해서 쉽게 만들지만 그때는 꽤나 힘들었다... 그래서 삽질의 과정을 포스팅 해보려 한다.
틀 만들기
틀은 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>style 추가하기
html의 결과가 조금 구리니 callender td에 style 을 추가하자
구리긴 매 한가지긴 하지만 그래도 각 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 를 넣어주기만 하면된다.
마지막 날 이후 다음 달 추가하기
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" title="preventMonth()"></td> <td id="yearMonth" colspan="5"></td> <td id="nextMonth" colspan="1"><input type="button" id="nextMonth_Button" title="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년전 처음으로 만든 허접한 토이프로젝트임에도 불구하고 많이들 봐주셔서 정말 감사드립니다.
혹시 시간이 좀 나시는 분은 글을 보시고 이 글을 어떤 이유로 좀 들어왔는지 댓글 한번만 달아주실 수 있나요 ? ㅎㅎ 참고해주셔서 감사드립니다.