JS - [ 오늘부터 14일간 날짜 출력 ]

HTML 구조

date__mont에는 이번 달 연도/달, date__list에는 오늘 부터 14일 출력. 이번 달을 넘어가면 나머지는 다음 달에 출력!

(date__nextMonth에는 다음 달 연도/달, date__nextList에는 다음 달 일 출력)

 

 

// 날짜 출력하기 - 14일
const dateMonth = document.querySelector('.date-container .date__month');
const dateList = document.querySelector(".date__list");
const dateNextMonth = document.querySelector('.date-container .date__nextMonth');
const dateNextList = document.querySelector(".date__nextList");


const date = new Date();
const weekOfDay = ["일", "월", "화", "수", "목", "금", "토"]
const year = date.getFullYear(); // 올해 년도
const month = date.getMonth()+1; // 이번 달

dateMonth.innerHTML = year+"/"+month; // 연도/이번 달 출력
const lastDay = new Date(year, month, 0); // 이번 달 마지막 날짜 계산


for (i = date.getDate(); i < date.getDate() + 14; i++) { // 오늘부터 14일간
    if(i > lastDay.getDate()) { // 이번달 마지막날 넘으면 다음달 날짜 계산
        calcNextMonth();
        break;
    };
    const listDay = document.createElement("li"); // 요일 + 날짜 담을 요소
    const spanWeekOfDay = document.createElement("span"); // 요일 담을 요소
    const spanDay = document.createElement("span"); // 날짜 담을 요소

    //class넣기
    spanWeekOfDay.classList = "week-of-day";
    spanDay.classList = "date";

    const dayOfWeek = weekOfDay[new Date(year + "-" + month + "-" + i).getDay()]; // 해당 요일 계산

    //요일 넣기 - 토 / 일은 색상 표시
    if (dayOfWeek == "토") {
        spanWeekOfDay.classList.add("saturday");
        spanDay.classList.add("saturday");
    } else if (dayOfWeek == "일") {
        spanWeekOfDay.classList.add("sunday");
        spanDay.classList.add("sunday");
    }
    spanWeekOfDay.innerHTML = dayOfWeek; // 요일 넣기
    listDay.append(spanWeekOfDay);
    
    spanDay.innerHTML = i; //날짜 넣기
    listDay.append(spanDay);

    dateList.append(listDay);

    dayClickEvent(listDay);
} // for-이번달

// 다음달 날짜 계산
function calcNextMonth() {
    if(month == 12) { // 이번달 12월이면 년도 + 1
        dateNextMonth.innerHTML = (year+1) + " / " + 1; // 년도/월 출력
    } else {
        dateNextMonth.innerHTML = year + "/" + (month+1); // 년도/월 출력
    }

    for(let i=1; i<=14-(lastDay.getDate() - date.getDate());i++) {
        const listDay = document.createElement("li"); // 요일 + 날짜
        const spanWeekOfDay = document.createElement("span"); // 요일 담을 요소
        const spanDay = document.createElement("span"); // 날짜 담을 요소

        //class넣기
        spanWeekOfDay.classList = "week-of-day";
        spanDay.classList = "date";
        
        const dayOfWeek = weekOfDay[new Date(year + "-" + (month+1) + "-" + i).getDay()]; // 해당 요일 계산

        //요일 넣기 - 토 / 일은 색상 표시
        if (dayOfWeek == "토") {
            spanWeekOfDay.classList.add("saturday");
            spanDay.classList.add("saturday");
        } else if (dayOfWeek == "일") {
            spanWeekOfDay.classList.add("sunday");
            spanDay.classList.add("sunday");
        }
        spanWeekOfDay.innerHTML = dayOfWeek; // 요일 넣기
        listDay.append(spanWeekOfDay);
        
        spanDay.innerHTML = i; //날짜 넣기
        listDay.append(spanDay);

        dateNextList.append(listDay);

        dayClickEvent(listDay);
    } // for-다음달
}

---

참조

https://loy124.tistory.com/192