script.js

// script.js

const yearDisplay = document.getElementById("yearDisplay");
const annualView  = document.getElementById("annualView");
const prevYearBtn = document.getElementById("prevYear");
const nextYearBtn = document.getElementById("nextYear");
const showHolidays = document.getElementById("showHolidays");
// showObserved is not used for special logic in this simple version
const showObserved = document.getElementById("showObserved");

let currentYear = 2025;

const monthNames = [
    "January", "February", "March", "April",
    "May", "June", "July", "August",
    "September", "October", "November", "December"
];

// weekday names, Sunday first (like screenshot)
const weekdayNames = ["S", "M", "T", "W", "T", "F", "S"];

// some fixed holidays (month is 0-based)
const fixedHolidays = [
    { month: 0,  day: 1 },  // New Year's Day
    { month: 6,  day: 4 },  // Independence Day
    { month: 11, day: 25 }  // Christmas
];

// Thanksgiving (4th Thursday of November)
function getThanksgiving(year) {
    const first = new Date(year, 10, 1);
    const firstDay = first.getDay(); // 0=Sun
    const offsetToThu = (4 - firstDay + 7) % 7;
    const firstThu = 1 + offsetToThu;
    return firstThu + 21; // +3 weeks
}

function isHoliday(year, month, day) {
    for (const h of fixedHolidays) {
        if (h.month === month && h.day === day) return true;
    }
    if (month === 10 && day === getThanksgiving(year)) return true;
    return false;
}

function renderCalendar(year) {
    yearDisplay.textContent = year;
    annualView.innerHTML = "";

    for (let month = 0; month < 12; month++) {
        const monthDiv = document.createElement("div");
        monthDiv.className = "month";

        // title
        const title = document.createElement("div");
        title.className = "month-title";
        title.textContent = monthNames[month];
        monthDiv.appendChild(title);

        const divider = document.createElement("div");
        divider.className = "month-divider";
        monthDiv.appendChild(divider);

        // table
        const table = document.createElement("table");
        table.className = "month-table";

        // header row with weekdays
        const thead = document.createElement("thead");
        const headRow = document.createElement("tr");
        weekdayNames.forEach(d => {
            const th = document.createElement("th");
            th.textContent = d;
            headRow.appendChild(th);
        });
        thead.appendChild(headRow);
        table.appendChild(thead);

        const tbody = document.createElement("tbody");

        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();

        // previous month
        const prevLastDay = new Date(year, month, 0).getDate();

        const startDay = firstDay.getDay(); // 0 = Sunday

        const totalCells = 6 * 7;
        let currentDay = 1;
        let nextMonthDay = 1;

        for (let i = 0; i < totalCells; i++) {
            if (i % 7 === 0) {
                var row = document.createElement("tr");
                tbody.appendChild(row);
            }

            const cell = document.createElement("td");

            if (i < startDay) {
                // days from previous month
                const day = prevLastDay - (startDay - 1 - i);
                cell.textContent = day;
                cell.classList.add("outside-day");
            } else if (currentDay > daysInMonth) {
                // days from next month
                cell.textContent = nextMonthDay++;
                cell.classList.add("outside-day");
            } else {
                // current month day
                cell.textContent = currentDay;

                if (showHolidays.checked && isHoliday(year, month, currentDay)) {
                    cell.classList.add("holiday");
                }

                currentDay++;
            }

            row.appendChild(cell);
        }

        table.appendChild(tbody);
        monthDiv.appendChild(table);
        annualView.appendChild(monthDiv);
    }
}

// buttons
prevYearBtn.addEventListener("click", () => {
    currentYear--;
    renderCalendar(currentYear);
});

nextYearBtn.addEventListener("click", () => {
    currentYear++;
    renderCalendar(currentYear);
});

// re-render when holiday checkbox changes
showHolidays.addEventListener("change", () => {
    renderCalendar(currentYear);
});

showObserved.addEventListener("change", () => {
    // no special behavior here, but we rerender to keep things consistent
    renderCalendar(currentYear);
});

// first draw
renderCalendar(currentYear);