Need help to show a calendar on a weekly basis

Elayaraja Subramanian — Mon, 01 Feb 2021 06:40:39 +0000

Hi techies,

I am working on a project which needs a calendar of events to be shown only for a week. Also, there will be buttons to navigate to previous weeks and next weeks. I have attached the javascript code which I wrote code for the monthly view (without any events attached to it). I need to make a few tweaks to the below code but since I am a beginner to the front-end devlopment, I can't able to fulfill the requirement.

JS Code:

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>

I'd appreciate any help.

DEV Community: Elayaraja Subramanian

Need help to show a calendar on a weekly basis