Java-Scripts.net

USA Calendar Script

A visual display for your sidebar or homepage. This script generates a neat HTML table displaying the current month. It is configured for the US/UK standard (Sunday start) and automatically highlights today's date so visitors know exactly where they are in the month.

Live Preview

Copy the Script

<script>
// USA Calendar Script
// Place this where you want the calendar to appear
(function() {
  var now = new Date();
  var day = now.getDate();
  var month = now.getMonth();
  var year = now.getFullYear();

  var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  
  // Leap year check
  if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    daysInMonth[1] = 29;
  }

  var firstDay = new Date(year, month, 1).getDay(); // 0 = Sunday
  var totalDays = daysInMonth[month];
  
  document.write('<table border="1" cellpadding="5" style="border-collapse:collapse; text-align:center;">');
  document.write('<tr><th colspan="7" bgcolor="#0d6efd" style="color:white">' + months[month] + " " + year + '</th></tr>');
  document.write('<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr><tr>');

  var col = 0;
  // Padding for empty slots before 1st of month
  for (var i = 0; i < firstDay; i++) {
    document.write('<td> </td>');
    col++;
  }

  // Days
  for (var d = 1; d <= totalDays; d++) {
    var bg = (d == day) ? 'bgcolor="#ffeb3b"' : ''; // Highlight today
    document.write('<td ' + bg + '>' + d + '</td>');
    col++;
    if (col == 7) {
      document.write('</tr><tr>');
      col = 0;
    }
  }
  
  document.write('</tr></table>');
})();
</script>

Frequently Asked Questions

By default, HTML tables align left. You can center it by wrapping the script in a <div style="display:flex; justify-content:center;"> tag or by adding margin: 0 auto; to the table styling in the script.

It uses **local time** (the user's computer clock). This means if a user in Tokyo visits your site, they might see "tomorrow's" date highlighted compared to a user in New York.

This is a simple display script. Adding events requires a much more complex logic system (arrays of event objects) or a database-driven calendar.