Java-Scripts.net

Monthly Calendar Widget

Organize your schedule. This script generates a dynamic calendar table for the current month, perfect for event widgets or date pickers.

Copy the Script

<script>
function createCalendar() {
    var now = new Date();
    var month = now.getMonth();
    var year = now.getFullYear();
    
    var firstDay = new Date(year, month, 1).getDay();
    var totalDays = new Date(year, month + 1, 0).getDate();
    
    var html = "<table border='1'><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 slots for days before the 1st
    for (var i = 0; i < firstDay; i++) {
        html += "<td></td>";
    }
    
    for (var d = 1; d <= totalDays; d++) {
        html += "<td>" + d + "</td>";
        if ((firstDay + d) % 7 === 0) html += "</tr><tr>";
    }
    
    html += "</tr></table>";
    document.write(html);
}
</script>

Frequently Asked Questions

The JavaScript `Date` object handles leap years automatically. When you ask for `new Date(2024, 2, 0).getDate()`, it correctly returns 29 for February 2024.

Yes. The script compares the loop index with the current system date (`new Date().getDate()`) and adds a CSS class like `.today` to the matching cell.

Yes. The output is a standard HTML table or grid, which can be styled with CSS to fit any container width.