-
[JAVASCRIPT] 달력(calendar) 만들기, 날짜 요일 구하기WORK 2020. 7. 27. 19:24
달력형태로 저장된 일정을 보여줘야하는 기능이 추가되어, 처음에는 플러그인을 쓰려고 찾아봤는데 단순히 조회해서 보여주기만 하는 형태라 javascript로 달력 만들기로 했다.
관련 내용은 검색하면 바로 쓸만한 괜찮은 소스들이 많다.
참고 : [JavaScript]달력 만들기, Date 객체 (https://jerryjerryjerry.tistory.com/26)
위 사이트 소스를 참고하여 약간 수정한 내용이다.
우선 소스를 바로 보기 전에 기본적으로 알고 있어야할 Date() 관련 함수들을 정리하자.
오늘 날짜 및 요일 구하기
<!DOCTYPE html> <html lang="ko"> <script language="javascript"> var today = new Date(); //오늘 날짜 console.log("new Date() : " + today); console.log("today.getFullYear() : " + today.getFullYear()); console.log("today.getMonth() : " + today.getMonth()); console.log("today.getDate() : " + today.getDate()); console.log("today.getDay() : " + today.getDay()); </script> </html>new Date() : Mon Jul 27 2020 14:37:00 GMT+0900 (대한민국 표준시) today.getFullYear() : 2020 today.getMonth() : 6 today.getDate() : 27 today.getDay() : 1확인해보면 알겠지만 달과 요일의 경우 시작 기준인 1월, 일요일의 값이 0시작한다.
그러니 현재의 달을 표현해주려면 +1을 해주면 되고, getDay 결과값을 통해 오늘이 월요일이라는 정보를 가져올 수 있다.요일 구하는 함수
<!DOCTYPE html> <html lang="ko"> <script language="javascript"> //특정 날짜의 요일 구하기 function getInputDayLabel() { var week = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'); var today = new Date('2020-07-27').getDay(); var todayLabel = week[today]; return todayLabel; } </script> </html>참고 : elena90.tistory.com/entry/Java-Script-오늘날짜-특정-날짜의-요일-구하기-예제-년도-월-일-요일
달력 (Calendar)
그러면 이제 캘린더를 그리는 함수를 확인해보자.
참고 소스와 달리 월요일부터 시작하는 달력이 필요해서 관련 내용을 수정했다.
<!DOCTYPE html> <html lang="ko"> <style> table { width: 800px; height: 700px; border: 1px solid #444444; border-collapse: collapse; } </style> <script language="javascript"> var today = new Date(); //오늘 날짜 var date = new Date(); //이전달 function beforem() //이전 달을 today에 값을 저장 { today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()); autoReload(); //만들기 } //다음달 function nextm() //다음 달을 today에 저장 { today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()); autoReload(); } //오늘선택 function thisMonth(){ today = new Date(); autoReload(); } function autoReload() { var nMonth = new Date(today.getFullYear(), today.getMonth(), 1); //현재달의 첫째 날 var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //현재 달의 마지막 날 var tbcal = document.getElementById("calendar"); // 테이블 달력을 만들 테이블 var yearmonth = document.getElementById("yearmonth"); // 년도와 월 출력할곳 yearmonth.innerHTML = today.getFullYear() + "년 "+ (today.getMonth() + 1) + "월"; //년도와 월 출력 if(today.getMonth()+1==12) // 눌렀을 때 월이 넘어가는 곳 { before.innerHTML=("<"+today.getMonth())+"월"; next.innerHTML="1월"+">"; } else if(today.getMonth()+1==1) // 1월 일 때 { before.innerHTML="<"+"12월"; next.innerHTML=(today.getMonth()+2)+"월" +">"; } else // 12월 일 때 { before.innerHTML="<"+(today.getMonth())+"월"; next.innerHTML=(today.getMonth()+2)+"월"+">"; } // 남은 테이블 줄 삭제 while (tbcal.rows.length > 2) { tbcal.deleteRow(tbcal.rows.length - 1); } var row = null; row = tbcal.insertRow(); var cnt = 0; var dayCheck = (nMonth.getDay()==0) ? 7 : nMonth.getDay(); //일요일을 마지막으로 넣기 위해서. // 1일 시작칸 찾기 for (i = 0; i < (dayCheck-1); i++) { cnt = cnt + 1; //요일값 cell = row.insertCell(); if (i>4) { //주말 cell.style.backgroundColor = "#f7f7f7"; } } // 달력 출력 for (i = 1; i <= lastDate.getDate(); i++) // 1일부터 마지막 일까지 { cell = row.insertCell(); var str=""; str += "<div>"+i+"</div>"; var day = (i<10) ? "0"+i : i; str += "<div id='"+day+"'></div>"; //나중에 원하는 날에 일정을 넣기위해 id값을 날자로 설정 cell.innerHTML = str; cnt = cnt + 1; if (cnt % 7 == 6) {//토요일 var str=""; str += "<div>"+i+"</div>"; var day = (i<10) ? "0"+i : i; str += "<div id='"+day+"'>"; str += "</div>"; cell.innerHTML = str; cell.style.color = "#009de0"; cell.style.backgroundColor = "#f7f7f7"; } if (cnt % 7 == 0) { //일요일 var str=""; str += "<div>"+i+"</div>"; var day = (i<10) ? "0"+i : i; str += "<div id='"+day+"'>"; str += "</div>"; cell.innerHTML = str; row = calendar.insertRow();// 줄 추가 cell.style.color = "#ed5353"; cell.style.backgroundColor = "#f7f7f7"; } //마지막 날짜가 지나면 일요일까지 칸 그리기 if(lastDate.getDate() == i && ((cnt % 7) != 0)){ var add = 7 - (cnt % 7); for(var k = 1; k <= add; k++){ cell = row.insertCell(); cnt = cnt + 1; if (cnt % 7 == 6) {//토요일 cell.style.backgroundColor = "#f7f7f7"; } if (cnt % 7 == 0) { //일요일 cell.style.backgroundColor = "#f7f7f7"; } } } //오늘날짜배경색 if( today.getFullYear() == date.getFullYear() && today.getMonth() == date.getMonth() && i==date.getDate() ) { cell.style.backgroundColor = "#e2f3da"; //오늘날짜배경색 } //마지막 날짜가 지나면 일요일까지 칸 그리기 if(lastDate.getDate() == i && ((cnt % 7) != 0)){ var add = 7 - (cnt % 7); for(var k = 1; k <= add; k++){ cell = row.insertCell(); cnt = cnt + 1; if (cnt % 7 == 6) {//토요일 cell.style.backgroundColor = "#f7f7f7"; } if (cnt % 7 == 0) { //일요일 cell.style.backgroundColor = "#f7f7f7"; } } } } //원하는 날짜 영역에 내용 추가하기 var tdId = "01"; //1일 var str = ""; str += "<br>09:00 일정1"; str += "<br>12:00 일정2 \n"; document.getElementById(tdId).innerHTML = str; } </script> <body onload="autoReload();"> <table align="center" id="calendar"> <tr> <td> <a id="before" href="javascript:beforem()"></a> </td> <td colspan="4" align="center"> <div id="yearmonth"></div> </td> <td> <a id="next" href="javascript:nextm()"></a> </td> <td> <a href="javascript:thisMonth()">오늘</a> </td> </tr> <tr> <td width="14%"> 월 </td> <td width="14%"> 화 </td> <td width="14%"> 수 </td> <td width="14%"> 목 </td> <td width="14%"> 금 </td> <td width="14%"><font color="#009de0">토</font></td> <td width="14%"><font color="#ed5353">일</font></td> </tr> </table> </body> </html>포스팅에 디자인을 다 넣을 수 없어서 뺐더니 약간 이상해졌지만.. 완성하면 이렇다
'WORK' 카테고리의 다른 글
[JAVA/JAVASCIPT] 한글 깨짐 인코딩, 디코딩 (0) 2020.09.08 워크벤치(workbench)에서 readOnly가 되어 데이터 수정이 안될때 (0) 2020.08.18 [jQuery] SELECT BOX 셀렉트 박스 선택시 여러 값 VALUE 가져오기 (0) 2020.08.06 [JAVA/JAVASCIPT] PC, 모바일(Mobile) 접속 디바이스 구분하기 (0) 2020.05.22 [JAVASCRIPT] 팝업창에 포커스 줘서 최상단에 띄우기 (0) 2020.05.15