Javascript code that fills a table with the calendar for the current month. Has links to go back to the previous month and forward to the next month. Also has a form to go to any month and year. The calendar code uses Zeller's congruence to determine which day of the week each date is on, so it is not correct for dates before the start of the Gregorian calendar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="Po Shan Cheah" />
<title>Javascript Calendar</title>
<script language="JavaScript">
// Returns true if leap year.
function leapyear(year) {
return (year % 400 == 0) || (year % 4 == 0) && (year % 100 != 0);
}
// Get last day of the month.
function getmaxday(month, year) {
var monthlen = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var maxday = monthlen[month - 1];
if (month == 2 && leapyear(year))
++maxday;
return maxday;
}
function monthname(month) {
var monthnames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"];
return monthnames[month - 1];
}
// Use Zeller's congruence to determine the day of the week for
// a specified date.
function dayofweek(day, month, year) {
var century;
var yr;
if (month <= 2) {
month += 10;
--year;
}
else
month -= 2;
century = Math.floor(year / 100);
yr = year % 100;
return (Math.floor((26 * month - 2) / 10) +
day + yr +
Math.floor(yr / 4) +
Math.floor(century / 4) +
203 - 2 * century) % 7;
}
function debug(str) {
var dbg = document.createElement("p");
var dbgtxt = document.createTextNode(str);
dbg.appendChild(dbgtxt);
document.body.appendChild(dbg);
}
function fillcalendar(month, year) {
var tbl = document.getElementById("month");
var rows = tbl.rows;
var firstdayofweek = dayofweek(1, month, year);
var maxday = getmaxday(month, year);
for (var i = 1; i < rows.length; ++i) {
var cols = rows[i].cells;
for (var j = 0; j < cols.length; ++j) {
var celltxt = cols[j].childNodes[0];
var day = (i - 1) * 7 + j + 1 - firstdayofweek;
if (day > 0 && day <= maxday)
celltxt.data = day;
else
celltxt.data = " ";
}
}
}
function updateform(month, year) {
var fmonth = document.getElementsByName("formmonth");
var fyear = document.getElementsByName("formyear");
fmonth[0].value = month;
fyear[0].value = year;
}
function formchanged() {
var fmonth = document.getElementsByName("formmonth");
var fyear = document.getElementsByName("formyear");
curmonth = fmonth[0].value;
curyear = fyear[0].value;
updateform(curmonth, curyear);
fillcalendar(curmonth, curyear);
}
function init() {
var now = new Date();
curmonth = now.getMonth() + 1;
curyear = now.getFullYear();
updateform(curmonth, curyear);
fillcalendar(curmonth, curyear);
}
function nextmonth() {
++curmonth;
if (curmonth > 12) {
curmonth = 1;
++curyear;
}
updateform(curmonth, curyear);
fillcalendar(curmonth, curyear);
}
function prevmonth() {
--curmonth;
if (curmonth < 1) {
curmonth = 12;
--curyear;
}
updateform(curmonth, curyear);
fillcalendar(curmonth, curyear);
}
</script>
<style type="text/css">
td, th {
width: 50px;
height: 30px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body onload="init()">
<form onsubmit="formchanged(); return false;">
<a href="#" onclick="prevmonth(); return false;"><<</a>
<select name="formmonth" onchange="formchanged(); return false;">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input type="text" name="formyear" size="5" onchange="formchanged(); return false;" />
<a href="#" onclick="nextmonth(); return false;">>></a>
</form>
<table rules="all" border="1" id="month">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<!-- vim:set tw=0: -->
