자바스크립트로 달력 구현하기

스프링부트 프로젝트를 진행하면서 예약페이지에서 필요한 달력을 구현하였는데,

오늘 날짜 기준으로 기존날짜는 보이지 않고 오늘 날짜 이후로만 뜨는 달력이 필요했다.

오늘 날짜 4-11 기준으로 +30일이 보여진다.

 

css를 안먹여서 이쁘진 않음..

해당 li마다 yyyy-mm-dd형태로 데이터 가공해서 전송해야해서 다음과 같이 들어가 있다.

-calender.html

 

 

-calender.js

// howmany 숫자만큼 날짜를 볼 수 있음
let howmany = 30;

// 오늘 일, 월, 년도를 구함
let today = new Date().getDate();
let month = new Date().getMonth() + 1;
const year = new Date().getFullYear();

const lastDate = new Date(year, month, 0).getDate(); // 해당월의 마지막일

// 오늘의 요일을 구함, 이 데이터는 숫자로 반환되어 그대로 쓸수가 없다... 하단에 각각 일~토 array와 맞춰서 활용할 예정
let day = new Date().getDay();

//요일 array
const dayArray = ["일", "월", "화", "수", "목", "금", "토"];
const dateArray = [];

// 반복 돌려서 html에서 추가해줄 div를 찾아줌
const fordate = document.getElementById("fordate");

// dateArray 에 오늘날짜 +howmany 만큼 array형태로 만들어 줌 ( 11, 12, 13, 14 .....)
for (let i = 0; i < howmany; i++) {
    let initToday = today + i;
    // 배열에 넘겨주려는 값이 해당 월의 마지막일보다 클 경우
    if (initToday > lastDate) initToday = today + i - lastDate;
    // 넘겨주려는 값에 마지막일 수를 뻅니다. (32 - 31 = 1)
    dateArray[i] = initToday;
}

// newdayArray는 요일 array와 숫자를 맞춰서 일~토를 반복하여 넣어준다.
// 만약 7이 넘는다면 다시 처음으로 돌아가서 일~토를 반복해주도록 한다.
const newdayArray = [];
for (let i = 0; i < howmany; i++) {
    let newday = day + i;
    // 불필요한 if문 제거
    newday = newday % 7;
    newdayArray[i] = dayArray[newday];
}

// 맨 위에 보여질 년도/ 월을 추가해줌
fordate.innerHTML += `<li class="month">
                                            <div>
                                                <span class="year">${year}년</span>
                                                <span class="month">${month}월</span>
                                                <div>
                                                </div>
                                            </div>
                                            </li>
                                           
                                            `

// howmany만큼 html을 추가해줄것
for (let i = 0; i < howmany; i++) {
    //2022.03.17(목)형식으로
    // 여기서 만약 월이 넘어가게 된다면 추가로 띄워준다
    // month+1 추가, 1일 되면 현재 월에 +1
    if (dateArray[i] == 1) {
        month = month + 1;
        fordate.innerHTML += `<li class="month">
                                            <div>
                                                <span class="year">${year}년</span>
                                                <span class="month">${month}월</span>
                                                <div>
                                                </div>
                                            </div>
                                            </li>`

    }
    // 1~9월일때는 앞에 0추가

    let newmonth;
    if (month < 10) {
        newmonth = "0" + month;
    }
    // 1~9일일때는 앞에 0추가
    if (dateArray[i] < 10) {
        dateArray[i] = "0" + dateArray[i]
    }
   // 데이터 전송시에 활용할 init 모양으로 date에 넣어줌
    let init = year + "-" + newmonth + "-" + dateArray[i] + "(" + newdayArray[i] + ")";
    fordate.innerHTML += `<li data-index="${i}" date="${init}" class="day"><a><span class="dayweek">${newdayArray[i]}</span><span class="day">${dateArray[i]}</span><span class="sreader"></span></a></li>`
}

 

만약 이 프로그램을 다른 날짜에 실행하면 그 날짜 기준으로 +30일 되어 자동으로 변경된다!