A simple and lightweight Javascript calendar Javascript 07 Jan 2010 Jason 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>