Java-Scripts.net

Simple Monthly Calendar

A lightweight table generator. This script outputs a clean, semantic HTML table representing the days of the current month.

Calendar

Copy the Script

<script>
function drawCalendar() {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth();
    
    var firstDay = new Date(year, month, 1).getDay(); // 0 = Sun
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    
    var html = "<table border='1' width='100%'><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>";
    
    // Empty cells
    for(var i=0; i<firstDay; i++) {
        html += "<td></td>";
    }
    
    // Days
    for(var d=1; d<=daysInMonth; d++) {
        html += "<td>" + d + "</td>";
        if ((firstDay + d) % 7 === 0) {
            html += "</tr><tr>";
        }
    }
    
    html += "</tr></table>";
    document.write(html);
}
</script>

Frequently Asked Questions

The script generates raw HTML tags (``, ``, `
`). You can apply any CSS class (like Bootstrap's `.table`) to make it look good instantly.

This basic version does not, but you can add an `if (day == 0 || day == 6)` check inside the loop to add a specific class to weekend cells.

Yes. Standard JavaScript `getDay()` starts on Sunday (0). To start on Monday, you just need to shift the logic for calculating empty cells at the start of the month.