매주 달력을 표시하는 데 도움이 필요합니다.

4307 단어
안녕하세요 기술자 여러분,

저는 일주일 동안만 표시되는 이벤트 달력이 필요한 프로젝트를 진행 중입니다. 또한 이전 주와 다음 주를 탐색할 수 있는 버튼이 있습니다. 월별 보기에 대한 코드를 작성한 자바스크립트 코드를 첨부했습니다(이벤트가 첨부되지 않음). 아래 코드를 약간 수정해야 하지만 프론트 엔드 개발의 초보자이기 때문에 요구 사항을 충족할 수 없습니다.

JS 코드:

const date = new Date();
const loadCalendar = () => {
    date.setDate(1);
    const monthDays = document.querySelector('.dashboard__calendar-dates');
    const lastDay = new Date(date.getFullYear(), date.getMonth()+1,0).getDate();
    const prevDay = new Date(date.getFullYear(), date.getMonth(),0).getDate();
    const firstDayIndex = date.getDay();
    const lastDayIndex = new Date(date.getFullYear(), date.getMonth()+1,0).getDay();
    const nextDays = 7 - lastDayIndex-1;
    const months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ];
    const daysName = [
        "Sun",
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat"
    ];
    const dayNumber = new Date();
    document.querySelector('.dashboard__calendar-h4-edit').innerHTML = months[date.getMonth()]+` <span id="year">`+date.getFullYear()+`<span>`;
    let days = "";
    for (let x = firstDayIndex; x>0; x--){
        days += `<p id="dashboard__calendar-prevdays">${prevDay-x+1}</p>`;
    }
    for (let i=1; i<=lastDay; i++){
        if(i===new Date().getDate()&& date.getMonth()=== new Date().getMonth()){
            days += `<p class="active">${i}</p>`;
        }else{
            days += `<p>${i}</p>`;
            monthDays.innerHTML = days;
        } 
    }
    for (let j=1; j<=nextDays; j++){
        days += `<p id="dashboard__calendar-nextdays">${j}</p>`;
        monthDays.innerHTML = days;
    }

}
loadCalendar();


HTML:

<div class="dashboard__calendar-edit">
    <div class="dashboard__calendar-container">
        <div class="dashboard__calendar-layout">
            <div class="dashboard__calendar-top">
                                                <h4 class="dashboard__calendar-h4-edit"></h4>
                                                <div class="dashboard__calendar-buttons">
                                                    <a href="#" class="dashboard__calendar-prev-btn"><i class="fas fa-chevron-left"></i></a>
                                                    <a href="#" class="dashboard__calendar-next-btn"><i class="fas fa-chevron-right"></i></a>
                                                </div>
        </div>
                                <div class="dashboard__calendar-data">
                                                <div class="dashboard__calendar-days dashboard__calendar-daysname">
                                                    <p>Sun</p>
                                                    <p>Mon</p>
                                                    <p>Tue</p>
                                                    <p>Wed</p>
                                                    <p>Thu</p>
                                                    <p>Fri</p>
                                                    <p>Sat</p>
                                                </div>
                                                <div class="dashboard__calendar-days dashboard__calendar-dates">
                                                </div>
                                                </div>
        </div>
     </div>
</div>


도움을 주시면 감사하겠습니다.

좋은 웹페이지 즐겨찾기