Highlighting Current Day on Javascript Calendar

Good day everyone,

I have the script I have worked on from a book.
However, I am confused as to how I can highlight the current day of the month, so that any one looking at the calendar knows what the date is.

I would like to make the current day background color red and the text white.

Any help or idea will be greatly appreciated.

Novice


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScripted Dynamic Table</title>
<script type="text/javascript">
// function becomes a method for each month object
function getFirstDay(theYear, theMonth)
{
var firstDate = new Date(theYear,theMonth,1);
return firstDate.getDay();
}
// number of days in the month
function getMonthLen(theYear, theMonth)
{
var oneHour = 1000 * 60 * 60;
var oneDay = oneHour * 24;
var thisMonth = new Date(theYear, theMonth, 1);
var nextMonth = new Date(theYear, theMonth + 1, 1);
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime() - oneHour)/oneDay);
return len;
}
// create array of month names
theMonths = new Array("January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
// deferred function to fill fields of table
function populateFields(form)
{
// initialize variables for later from user selections
var theMonth = form.chooseMonth.selectedIndex;
var theYear = form.chooseYear.options
[form.chooseYear.selectedIndex].value;
// initialize date-dependent variables
// which is the first day of this month?
var firstDay = getFirstDay(theYear, theMonth);
// total number of <TD>...<\\/TD> tags needed in for loop below
var howMany = getMonthLen(theYear, theMonth);
// set month and year in top field
form.oneMonth.value = theMonths[theMonth] + " " + theYear;
// fill fields of table
for (var i = 0; i < 42; i++)
{
if (i < firstDay || i >= (howMany + firstDay))
{
// before and after actual dates, empty fields
// address fields by name and [index] number
form.oneDay[i].value = "";
}
else
{
// enter date values
form.oneDay[i].value = i - firstDay + 1;
}
}
}
</script>
</head>
<body>
<h1>Month at a Glance (Dynamic)</h1>
<hr />
<script type="text/javascript">
// Initialize variable with HTML for each day's field.
// All will have same name, so we can access via index value.
// Empty event handler prevents
//
//reverse-loading bug in some platforms.
var oneField = "<input type='text' name='oneDay' size='2' onfocus=''>";
// Start assembling HTML for raw table:
var content = "<form><center><table border='1'>";
// Field for month and year display at top of calendar:
content += "<tr><th colspan='7'>";
content += "<input type='text' name='oneMonth'><\\/th><\\/tr>";
// Days of the week at head of each column:
content += "<tr><th>Sun<\\/th><th>Mon<\\/th><th>Tue<\\/th><th>Wed<\\/th>";
content += "<th>Thu<\\/th><th>Fri<\\/th><th>Sat<\\/th><\\/tr>";
content += "<tr>";
// layout 6 rows of fields for worst-case month
for (var i = 1; i < 43; i++)
{
content += "<td align='middle'>" + oneField + "<\\/td>";
if (i % 7 == 0)
{
content += "<\\/tr><tr>";
}
}
content += "<\\/table>";
// blast empty table to the document
document.write(content);
</script>
<select name="chooseMonth">
<option value="January" selected="selected">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="chooseYear">
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<br />
<input type="button" name="updater" value="Update Calendar"
onclick="populateFields(this.form)" />
</form>
</body>
</html>

  1. get the current date using the Date object and break it up into day, month and year.

  2. then as you loop through generating the calendar for the month, if the calendar’s year and month and the current day of the month in the loop match the current date in 1), set the css style properties of that table cell to suit.

Thank you!! Got it all working perfectly.

Novice