See More About:

Calendar Popups

1. The Calendar Script

Join the Discussion

Questions? Comments?

More of this Feature

Which Calendar? In Page

So you have decided that it would be useful to provide an option on one of your pages that allows visitors to your site to display a calendar. Here is a script that can do that for you.

The first step in using this script is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called calendar.js.

// Calendar Popup
// copyright 11Nov2001, 8dec2007 by Stephen Chapman, Felgall Pty Ltd

var pagebg = '#add9f5';  // pop-up background colour
var headbg = '#cccccc';  // table heading background colour
var todaybg = '#9999cc'; // current day of month background colour

// valid range for yy is 1901 to 2100 inclusive or zero for current year
// valid range for mm is 1 to 12 or zero for current month

// permission is granted to use this javascript provided that the below code is not altered
function monthlength(month,year) {var dd = new Date(year, month, 0);return dd.getDate();}
function dispCal(yy,mm) { var dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; var moy = ['January','February','March','April','May','June','July','August','September','October','November','December'];  if (mm < 0 || mm > 12) {alert('month must be between 1 and 12'); return false;} if (yy != 0 && (yy < 1901 || yy > 2100)) {alert('year must be after 1900 and before 2101'); return false;} var calendar = new Date();  var today = calendar.getDate(); calendar.setDate(1); if (yy > 1900) calendar.setFullYear(yy); if (mm > 0) calendar.setMonth(mm - 1); var yy = year = calendar.getFullYear(); var month = calendar.getMonth(); calendar.setDate(today); var weekday = calendar.getDay(); var daysInMonth = monthlength(month+1,year); var hilite_start = '<td width="30" style="background:' + todaybg + '" align="center"><b>'; var td_start = '<td width="30" align="center">'; var cal = '<div id="cal"><div style="border:1pt solid #cccccc;height:190px;width:238px"><table border="0" cellspacing="0" cellpadding="2"><tr><td colspan="7" style="background:' + headbg + '" align="center"><b>' + moy[month]  + ' ' + year + '</b></td></tr><tr style="height:23px">'; for(dex=0; dex < 7; dex++) {if(weekday == dex) cal += td_start + '<b>' + dow[dex] + '</b></td>'; else cal += td_start + dow[dex] + '</td>';} cal += '</tr><tr style="height:23px">'; var day2 = today; for (dex = today; dex > 6; dex -=7) day2 = dex; weekday -= day2 - 1; while (weekday < 0) weekday += 7; for(dex=0; dex < weekday; dex++) cal += td_start + ' </td>'; for(dex=1; dex <= daysInMonth; dex++) {if(weekday == 7) {cal += '</tr><tr style="height:23px">'; weekday = 0;} if(today==dex) cal += hilite_start + dex + '</b></td>'; else cal += td_start + dex + '</td>'; weekday += 1;} for(dex=weekday; dex < 7; dex++) cal += td_start + ' </td>'; cal += '</tr></table></div>';
if (document.getElementById && arguments.length == 2) {var mmb = month;  mm = month + 1; var yya = yyb = yy; if (mmb <1) {mmb += 12; yyb--;} var mma = month + 2; if (mma > 12) {mma -= 12; yya++;} var yb = yy -1; var ya = yy +1; cal += '<table border="0" cellspacing="0" cellpadding="2" width="210"><tr><td><a href="#" onclick="if (cala = dispCal('+yb+','+mm+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}"><<</a></td><td><a href="#" onclick="if (cala = dispCal('+yyb+','+mmb+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}"><</a></td><td align="right"><a href="#" onclick="if (cala = dispCal('+yya+','+mma+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}">></a></td><td align="right"><a href="#" onclick="if (cala = dispCal('+ya+','+mm+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}">>></a></td></tr></table>';} else {cal += '<div> </div>';} cal += '</div>'; return cal;}
function calendar(yy,mm) {var cal = dispCal(yy,mm); if (!cal) return false; TheNewWin = window.open('','calendar','height=255,width=260,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); TheNewWin.document.write('<!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><title>Calendar<\/title>');
if (document.getElementById) TheNewWin.document.write('<script>var pagebg = "'+pagebg+'";var headbg = "'+headbg+'";var todaybg = "'+todaybg+'";'+dispCal.toString()+'<\/script>');
TheNewWin.document.write('<\/head><body style="overflow:hidden;background:'+ pagebg + '">' + cal + '<div style="text-align:center; width:250px"><a href="#" onclick="self.close();return false;">Close Window<\/a><\/div><div style="text-align:center; width:250px;font-size:8px;>Calendar Javascript by <a href="http://www.felgall.com/" target="_blank">Felgall Pty Ltd</a>.</div><\/body><\/html>'); return true;}

You may wish to make changes to the colours used in the pop-up so these have been loaded into variables outside of the function but you shouldn't need to change anything else in the script.

You next attach the script into your web page that you want to be able to display a popup calendar from by adding the following code into the head section of your page.

All that remains then is to call the popup calendar from within the page, you just have to tell it which calendar to display.

The Script | Which Calendar? | In Page

Note that the script and the descriptions of how it can be called are copied from the "Ask Felgall" website with the permission of the copyright owner.

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

JavaScript