This Javascript code will display a calendar in a table, useful for date picking...
// these are labels for the days of the week
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// these are human-readable month name labels, in order
cal_months_labels = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];
// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// this is the current date
var cal_current_date = new Date();
function Calendar(month, year) {
this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
}
Calendar.prototype.generateHTML = function(){
// get first day of month
var firstDay = new Date(this.year, this.month, 1);
var startingDay = firstDay.getDay();
// find number of days in month
var monthLength = cal_days_in_month[this.month];
// compensate for leap year
if (this.month == 1) { // February only!
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
monthLength = 29;
}
}
// get todays date
var cal_today_date = new Date();
checkDay = (cal_today_date.getMonth() == this.month && cal_today_date.getFullYear() == this.year) ? true : false;
// do the header
var monthName = cal_months_labels[this.month]
var html = '<table class="calendar-table" cellpadding="4" cellspacing="0">';
html += '<tr><th><a href="javascript:cal.prevMonth()">«</a></th><th colspan="5">';
html += monthName + " " + this.year;
html += '</th><th><a href="javascript:cal.nextMonth()">»</a></th></tr>';
html += '<tr class="calendar-header">';
for(var i = 0; i <= 6; i++ ){
html += '<td class="calendar-header-day">';
html += cal_days_labels[i];
html += '</td>';
}
html += '</tr><tr>';
// fill in the days
var day = 1;
// this loop is for is weeks (rows)
for (var i = 0; i < 9; i++) {
// this loop is for weekdays (cells)
for (var j = 0; j <= 6; j++) {
html += '<td class="calendar-day">';
if (day <= monthLength && (i > 0 || j >= startingDay)) {
ts = this.generateTimestamp(day);
if (checkDay == true && day == cal_today_date.getDate())
html += '<a class="today" href="javascript:void(0)">' + day + '</a>';
else
html += '<a href="javascript:void(0)">' + day + '</a>';
day++;
}
html += '</td>';
}
// stop making rows if we've run out of days
if (day > monthLength) {
break;
} else {
html += '</tr><tr>';
}
}
html += '</tr></table>';
document.getElementById('calendar-holder').innerHTML = html;
}
Calendar.prototype.generateTimestamp = function(day) {
month = this.month + 1;
return "'" + day + "','" + month + "','" + this.year + "'";
}
Calendar.prototype.prevMonth = function() {
if (this.month == 0) {
this.month = 12;
this.year = (this.year - 1);
}
this.month = (this.month - 1);
this.generateHTML();
}
Calendar.prototype.nextMonth = function() {
if (this.month == 11) {
this.month = -1;
this.year = (this.year + 1);
}
this.month = (this.month + 1);
this.generateHTML();
}
To display the calendar for example...
<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Select date</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/calendar.css" />
<script type="text/javascript" src="scripts/calendar.js"></script>
</head>
<body>
<div id="calendar-holder">
<script type="text/javascript">
// <![CDATA[
var cal = new Calendar();
cal.generateHTML();
// ]]>
</script>
</div>
</body>
</html>