Untitled

const calendar = document.querySelector(".calendar");
const monthbanner = document.querySelector(".month");
let navigation = 0;
const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];


function loadCalendar() {
    const dt = new Date();

    if (navigation != 0) {
        dt.setMonth(new Date().getMonth() + navigation);
    }
    const day = dt.getDate();
    const month = dt.getMonth();
    const year = dt.getFullYear();
    monthbanner.innerText = `${dt.toLocaleDateString("en-us", {
        month: "long",
    })} ${year}`;

    calendar.innerHTML = "";

    const dayInMonth = new Date(year, month + 1, 0).getDate();
    const firstdayofMonth = new Date(year, month, 1);

    const dateText = firstdayofMonth.toLocaleDateString('en-us', { weekday: "long", year: "numeric", month: "numeric", day: "numeric" });
    const dayString = dateText.split(", ")[0];
    const emptydays = weekdays.indexOf(dayString);
    for (let i = 1; i <= dayInMonth + emptydays; i++) {
        const dayBox = document.createElement('div');
        dayBox.classList.add("day");
        if (i > emptydays) {
            dayBox.innerText = i - emptydays;
            if (i - emptydays === day && navigation == 0) {
                dayBox.id = "currentday";
            }
        } else {
            dayBox.classList.add("plain");
        }

        dayBox.addEventListener('click', () => {
            const clickedDate = dayBox.innerText;
            console.log(`Date clicked: ${clickedDate} -${month + 1} -${year}`);
        })

        calendar.append(dayBox);
    }



}

function buttons() {
    const btnNext = document.querySelector("#btnnext");
    const btnBack = document.querySelector("#btnback");

    btnBack.addEventListener("click", () => {
        navigation--;
        loadCalendar();
    });
    btnNext.addEventListener("click", () => {
        navigation++;
        loadCalendar();
    });
}

buttons();
loadCalendar();