[java script] Date 객체를 사용한 달력 만들기

콘솔창에 출력되는 달력을 만든다. 

 

Date 객체 초기화

let now = new Date();

 

개별 날짜 및 시간 구성 요소

String type으로 전달

적어도 연도와 월이 주어지면, 자신의 구성 요소(연, 월, 일, 시, 분, 초, 밀리초)를 모두 매개변수의 값에서 가져오는 Date 객체를 생성

 누락한 요소에는 가장 낮은 값(day는 1, 나머지는 0)을 사용

month 월을 나타내는 정숫값. 0은 1월을 나타내고 11은 12월을 나타냄. 

    let setYear=2021;
    let setMonth=4;
    let setDay=1; 
    let dt=new Date(`${setYear}-${setMonth}-${setDay}`);

.

Date.prototype.getDay()

생성된 Date 객체에 해당하는 날짜의 요일을 가져온다. 

0은 일요일 6은 토요일 

        let start = new Date(y,m-1,1);
        // console.log(start);  
        let dayOfWeek=start.getDay(); 

 

Date.prototype.getDate()

생성된 Date 객체에 해당하는 날짜를 가져온다. 

이 메서드에 속성값 중 날짜에 해당하는 부분에 0을 넣어서 어떤 달의 마지막 날을 가져올 수 있다.

    //마지막 날짜를 가져오는 것 
    let dt2=new Date(setYear,setMonth,0);
    let lastDay = dt2.getDate(); 
    // console.log(lastDay);

(( console.log 찍으면서 확인해서 맞추기는 했는데 이전달의 마지막 날인지 현재 달의 마지막 날인지는 잘 모르겠다. ))

 

 

어떤 달이 시작되는 요일이랑 마지막 날짜를 알 수 있다면 달력을 만들 수 있다.

 ///////////////달력그리기//////////////////////////////////////////////////////////////////////////////////////////
    function makeCalender(y,m){ 
        let calender=[]; 
        let newCalender=[]; 
        let start = new Date(y,m-1,1);
        // console.log(start); 
        let end = new Date(y,m,0);
        // console.log(end); 
        let dayOfWeek=start.getDay(); 
        let endDay =end.getDate();
        let prevMonth = new Date(y,m-1,0);
        // console.log(prevMonth); 
        let prevEndDay=prevMonth.getDate();
        
        //Date(y,m,d) month부분이 이상하게 찍힐 때가 있음. console.log로 확인. 
        //배열에 m월 1일부터 마지막 날 까지 넣는다. 
        for(let i=0; i<endDay; i++){
            calender[i]=String(i+1).padStart(2,0); 
        }
        // 배열 앞쪽에 이전 달의 마지막 날짜부터 -1하면서 차례대로 넣는다. 
        for(let j=0; j<dayOfWeek; j++){
            // calender.unshift(String(prevEndDay));
            // prevEndDay--; 
            calender.unshift("  "); //빈칸 넣기 
        }
        // 달력이 꽉 차지 않으면 마지막 날에 다음 달 달력도 넣는다. 
        if(calender.length%7!=0){ 
            nextDay =7-calender.length%7; 
            for(let k=1; k<=nextDay; k++){
                // calender.push(String(k).padStart(2,0)); 
                calender.push("  ");// 빈칸 넣기 
            }
        }
        // 이전달 이번달 다음달의 날짜가 모두 포함된 배열(calender)을 7칸씩 나눠서 새로운 배열(newCalender)에 담아준다. 
        for(let l=0; l<calender.length/7; l++){
            newCalender[l]='';
            for(let n=(l*7); n<(l*7)+7; n++){ 
                newCalender[l]+=calender[n]+" "; 
            }
        }
        //콘솔창에 찍기. 
        console.log(y+'년'+m+'월');
        console.log("일 월 화 수 목 금 토")
        for(m=0; m<newCalender.length; m++){
            console.log(newCalender[m]);
        }
        console.log("");
    }
    makeCalender(2016,2); 
    makeCalender(2016,3); 
    makeCalender(2016,4); 
    makeCalender(2016,5); 
    makeCalender(2016,6);