randomfox (randomfox) wrote,
randomfox
randomfox

Javascript Monthly Calendar

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;">&lt;&lt;</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;">&gt;&gt;</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>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
	<tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
	<tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
	<tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
	<tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
	<tr>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	    <td>&nbsp;</td>
	</tr>
    </table>
</body>

</html>
<!-- vim:set tw=0: -->

Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments