자바스크립트 : Date() / 이번 달 달력 만들기

Date()

        var today = new Date();
        document.write(today.toLocaleString(),"<br>"); //2022. 6. 13. 오전 11:08:09
	document.write(today.getFullYear(),"<br>"); //2022
        document.write(today.getMonth(),"<br>"); //5 (6월인데!)
        document.write(today.getDate(),"<br>") //13
        document.write(today.getDay(),"<br>") //1 (0 일요일 ~ 6 토요일)

Date()으로 오늘 날짜 정보를 얻을 수 있다.

2022년 6월 13일 현재 날짜로 출력된다.

하지만 getMonth로 월을 출력해보면 6이 아닌 5로 출력되고, 날짜 지정할 때 이것을 주의해주어야 한다.

 

 

 

Date( , , , , , , )

       var yday = new Date(2002,4,31);
        document.write(yday.toLocaleString(),"<br>"); //2002. 5. 31. 오전 12:00:00
        document.write(yday.getFullYear(),"<br>"); //2022
        document.write(yday.getMonth(),"<br>"); //4
        document.write(yday.getDate(),"<br>") //31
        document.write(yday.getDay(),"<br>") //5 (금요일)

Date(year, month, date, hours, minutes, seconds, ms) 으로 특정 날짜를 지정해서 만들 수도 있다.

5월 31일을 지정하고 싶으면 month에는 -1해준 4를 넣어준다.

month를 출력할 때도 4를 확인할 수 있다.

 

 

 

 

Date(' ')

        var sday = new Date('2002-04-31 00:00:00');
        document.write(yday.toLocaleString(),"<br>"); //2002. 5. 31. 오전 12:00:00

날짜 지정해주는 다른 방식으로 문자열으로 ' '안에 넣어줄 수도 있다.

 

 

 

        var tday = new Date(2022,6,14);
        var d = tday.getTime()-today.getTime(); //밀리초
        document.write(d, "<br>");
        document.write(d /(1000 * 60 * 60 * 24)); //일

날짜와 날짜를 비교해서 디데이를 구할 수도 있다.

날짜를 빼면 (-) 밀리초 단위로 숫자가 나온다.

밀리초에 1000을 나누어 초로 바꾸고, 60을 나누어 분으로, 60을 나누어 시간으로, 24를 나누어 하루로 단위를 바꿀 수 있다.

 

밀리초 / 1000 = 초
밀리초 / (1000 * 60) = 분
밀리초 / (1000 * 60 * 60) = 시간
밀리초 / (1000 * 60 * 60 * 24) = 일 

 

 

 

 

setDate()

        var today = new Date();
        document.write(today.toLocaleString(),"<br>"); //2022. 6. 13. 오후 12:02:13
        today.setDate(35);
        document.write(today.toLocaleString(),"<br>"); //2022. 7. 5. 오후 12:02:13

setDate로 날짜의 일(date)를 변경할 수 있다.

35일은 존재하지 않기 때문에 다음달로 넘어간 것을 확인할 수 있다.

 

 

 

today.setDate(today.getDate()+ 3);
        document.write(today.toLocaleString(),"<br>") //2022. 7. 8. 오후 12:02:13

날짜에서 3일 뒤 날짜를 출력했다. getDate에서 특정 일수를 더해주는 등의 작업을 해서 setDate해줄 수 있다.

 

 

 

 

달력 만들기

위의 내용들을 이용해서 자바스크립트로 이번달 달력을 만들어보도록 한다.

달력이 꽉 차도록 달력날짜를 가져오고, 토요일과 일요일은 각각 파란색,빨간색으로 지정한다. 이번달이 아닌 날들은 회색으로 지정해야 한다.

 

 

 

 var today = new Date(); //22년 6월 15일
        var tag = `<h2>${today.getMonth()+1}월</h2>`;
        tag += `<table><tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr>`;

new Date();로 오늘날짜를 today 변수에 저장했다. 

tag 태그에 실행할 태그를 저장하도록한다. 오늘날짜는 22년 6월 15일 이지만 getMonth로 월 정보를 출력하면 5로 나오기 때문에 제목을 설정할 때 6월이 나오도록 +1을 해주었다.

th로 월 ~ 일 테이블 상단을 만들었다.

 

 

        //해당 월의 초일
        var startDate = new Date(today.getFullYear(),today.getMonth(),1); //6월 1일
        //해당 월의 말일
        var endDate = new Date(today.getFullYear(),today.getMonth()+1,0); //6월 30일
        //달력상으로 첫번째 날짜
        startDate.setDate(startDate.getDate()-startDate.getDay()); //5월 29일
        //달력상으로 마지막 날짜
        endDate.setDate(endDate.getDate()+ (6 - endDate.getDay())); // 7월 2일

이번달의 첫날과 마지막날을 구했다.

이번달의 년도, 월을 가지고오고 1일로 지정하면 이번달의 첫날인 6월 1일이 된다. 이를 startDate 변수에 저장하였다.

이번달의 마지막날은 30일, 31일... 언제가 될지 알 수 없기 때문에 년도, 월+1, 0일으로 지정해서 다음달 0일이되도록 한다. 다음달 0일은 존재하지 않기 때문에 이번달의 마지막 일이 된다. 이를 endDate 변수에 저장했다.

 

하지만 달력을 만들때 진짜 원하는 첫날과 마지막날은 달력의 첫칸과 마지막칸이다. 

첫칸이 일요일으로 요일값이 0부터 시작하는 것을 이용한다. 
달력의 첫번째 칸과 내가 가지고 있는 첫번째 날짜의 칸수의 차이는 날짜의 요일값만큼이다. 날짜의 일수에서 날짜의 요일을 빼주면 내가 원하는 첫번째 칸의 날짜가 지정된다. 이를 SetDate로 StartDate변수에 날짜를 새로 지정하였다.

달력의 마지막 칸과 내가 가지고 있는 마지막 날짜의 칸수 차이를 확인한다.

마지막칸의 요일값은 6이고 여기서 내가 가지고 있는 날짜의 요일값을 빼면 마지막칸과의 차이 칸수를 구할 수 있다. 차이나는 만큼 날짜에서 더해주면 달력의 끝 날짜가 된다. 이것 또한 endDate변수로 지정하였다.

 

 

 var line = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24 *7);

이제 모든 날짜는 찾았고, 달력을 지정해주면 된다. 우선 달력 테이블의 행이 몇개일지를 지정해야 한다.

이것을 위해서 달력의 첫날짜, 끝날짜를 구했던 것이다.

두 날짜의 getTime 차이는 밀리초 단위이기 때문에 1000을 나누어 초, 60을 나누어 분, 60을 나누어 시, 24을 나누어 일, 7을 나누어 주 단위로 조정했다.

두 날짜의 차이가 몇주가 되는지 알 수 있다. 이것을 line 변수에 저장했다.

 

 

for(i=0;i<line;i++){
            tag += '<tr>';
            for(j=0;j<7;j++){
                if(startDate.getMonth() == today.getMonth())
                    tag += `<td>${startDate.getDate()}</td>`;
                else
                    tag += `<td class='disable'>${startDate.getDate()}</td>`;
                    startDate.setDate(startDate.getDate()+1);
            }
            tag += '</tr>';
        }
        tag += '</table>';
        document.write(tag);

0부터 line 변수 미만까지면 line 값을 올림한 만큼 행 수를 만들게 된다. 

반복문으로 <tr>을 만들고 그 안에 중첩반복문으로 <td>를 넣도록 한다.

<td>에 들어갈 날짜 값은 startDate부터 시작하고 +1씩 해주면 된다. 

여기서 이번달이 아닌 날짜들에는 회색 글자를 적용하기 위해서 조건문을 사용했다. 

startDate(내가 지금 달력에 입력하려는 날짜)가 오늘의 getMonth와 같으면 그냥 날짜를 출력하고, 다르면 disable 클래스를 적용해서 출력하였다. CSS는 아래에서 확인하도록 한다.

모든 반복문이 끝나고 </table> 하여 태그를 마감시켜주고 출력하면 테이블이 생성된다.

 

 

 

  h2{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            margin:0 auto;
        }
        td,th{
            width: 100px;
            border:1px solid black;
            padding: 10px;
        }
        td{
            height: 100px;
            text-align: right;
            vertical-align: top;
        }
        td:nth-child(7n),th:nth-child(7n){
            color:blue;
        }
        td:nth-child(7n+1),th:nth-child(7n+1){
            color:red;
        }
        .disable{
            color:gray !important;
        }

적용한 CSS는 위와같다. 나머지는 테이블 칸에 대한 스타일이고 확인해야 할것은 토요일-파란색, 일요일-빨간색, 다른 달- 회색 적용이다.

우선 파란색은 테이블의 7칸,14칸..마다 나오는 것이기 때문에 nth-child(7n)을 이용했다.

빨간색은 1칸, 8칸..마다 나오므로 nth-child(7n+1)으로 지정하였다.

회색 글씨가 나오도록 하는 것은 disable 클래스로 만들고 토요일, 일요일이더라도 우선순위를 주기 위해 !important를 붙였다.

 

달력완성~