Java-Scripts.net

Full Year Calendar

See the big picture. This script loops through all 12 months of the year to construct a comprehensive annual calendar view.

Copy the Script

<div id="calendar"></div>

<script>
function createCalendar(year) {
    var container = document.getElementById('calendar');
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    
    for (var m = 0; m < 12; m++) {
        var d = new Date(year, m, 1);
        var table = "<h4>" + months[m] + "</h4><table><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr><tr>";
        
        // Empty cells for days before start of month
        for (var i = 0; i < d.getDay(); i++) {
            table += "<td></td>";
        }
        
        // Fill days
        while (d.getMonth() == m) {
            table += "<td>" + d.getDate() + "</td>";
            if (d.getDay() == 6) { // Saturday, new row
                table += "</tr><tr>";
            }
            d.setDate(d.getDate() + 1);
        }
        table += "</tr></table>";
        container.innerHTML += table;
    }
}
createCalendar(2025);
</script>

Frequently Asked Questions

Yes. The script typically uses `new Date().getFullYear()` to get the current year, but you can pass any year (e.g., 2030) to the function to generate future calendars.

Yes. You can add a check inside the loop: `if (day == today && month == currentMonth) { addClass('highlight') }`.

Generally yes. Since it generates standard HTML tables or grids, it prints well if you use media queries to adjust the width for paper.