Tip

Javascript Popup Calendar

In the Notes client, you can add a layout region to a form and put a date field in it, resulting in a popup calendar for facilitating date selection. Whatever date the user clicks on populates the field they were editing. Here's a JavaScript library that gives you the same functionality.

To call it, include it in your HTML document adding the following to your HTML Head:

<SCRIPT LANGUAGE="JavaScript" SRC="popupCal.js"></SCRIPT>

Now create an anchor/link of any type next to the date field you want to associate the popup calendar to:

<A HREF="javascript:popupCal('calWin',document.forms[0].dateField,'Click the date for date field:')">Calendar</a>

The first paramater is a name for the field, the second parameter is the form element where the date will be returned, and the third element is an optional string for user instructions. //PopupCal.js by Martin Leon
//Declare globals
var popCalDstFld;
var popCalWin;
function popupCal()
{
var tmpDate = new Date();
var tmpString = "";
var tmpNum = 0;
var popCalDateVal;
//Initialize the window to an empty object.
popCalWin = new Object();
//Check for the right number of arguments
if (arguments.length < 2){
alert("popupCal(): Wrong number of arguments.");
return void(0);
}
//Get the command line arguments -- label is optional
var dstWindowName = popupCal.arguments[0];
popCalDstFld = popupCal.arguments[1];
if(arguments.length > 2)
var fieldLabel = popupCal.arguments[2];
else
var fieldLabel = "Click on the desired date:";
tmpString = new String(popCalDstFld.value);
//If tmpString is empty (meaning that the field is empty) use todays date as the starting point
if(tmpString == ""){
popCalDateVal = new Date()
}
else{
//Make sure the century is included, if it isn't, add this century to the value that was
//in the field
tmpNum = tmpString.lastIndexOf( "/" );
if ( (tmpString.length - tmpNum) == 3 ){
tmpString = tmpString.substring(0,tmpNum + 1)+(tmpDate.getFullYear()/100)+tmpString.substr(tmpNum+1);
popCalDateVal = new Date(tmpString);
}
else{
//If we got to this point, it means the field that was passed in had a 4 digit number after
//the last slash. Try to convert it to a date
popCalDateVal = new Date(tmpString.toString());
};
};
//Make sure the date is a valid date. Set it to today if it is invalid
if( popCalDateVal.toString() == "Invalid Date" ){
popCalDateVal = new Date();}
//Set the base date to midnight of the first day of the specified month, this makes things easier?
//Call the routine to draw the initial calendar
var dateString = String(popCalDateVal.getMonth()+1) + "/" + String(popCalDateVal.getDate()) + "/" + String(popCalDateVal.getFullYear());
reloadCalPopup(dateString, dstWindowName, fieldLabel);
return void(0);
}
function closeCalPopup(){
//Can't tell the child window to close itself, the parent window has to tell it to close.
popCalWin.close();
return void(0);
}
function reloadCalPopup(){
//Set the window's features here
var windowFeatures = "height=265,width=235,resizable=no";
var tmpDate = new Date( reloadCalPopup.arguments[0] );
if (tmpDate.toString() == "Invalid Date") tmpDate = new Date();
tmpDate.setDate(1);
//Get the calendar data
var popCalData = calPopupSetData(tmpDate, reloadCalPopup.arguments[2],reloadCalPopup.arguments[1]);
//Check to see if the window has been initialized, create it if it hasn't been
v if( popCalWin.toString() == "[object Object]" ){
popCalWin = window.open("",reloadCalPopup.arguments[1],windowFeatures);
}
else {
//Remember the existing window's position
var xPos = popCalWin.screenX;
var yPos = popCalWin.screenY;
popCalWin.document.open();
}
popCalWin.document.write(popCalData);
popCalWin.document.close();
return void(0);
}
function calPopupSetData(firstDay,fieldLabel,dstWindowName){
var popCalData = "";
var lastDate = 0;
var fnt = new Array( "<FONT SIZE="1">", "<FONT SIZE="2">", "<FONT SIZE="2" COLOR="#CC2222">");
var dtToday = new Date();
var thisMonth = firstDay.getMonth();
var thisYear = firstDay.getFullYear();
var nPrevMonth = (thisMonth == 0 ) ? 11 : (thisMonth - 1);
var nNextMonth = (thisMonth == 11 ) ? 0 : (thisMonth + 1);
var nPrevMonthYear = (nPrevMonth == 11) ? (thisYear - 1): thisYear;
var nNextMonthYear = (nNextMonth == 0) ? (thisYear + 1): thisYear;
var sToday = String((dtToday.getMonth()+1) + "/01/" + dtToday.getFullYear());
var sPrevMonth = String((nPrevMonth+1) + "/01/" + nPrevMonthYear);
var sNextMonth = String((nNextMonth+1) + "/01/" + nNextMonthYear);
var sPrevYear1 = String((thisMonth+1) + "/01/" + (thisYear - 1));
var sNextYear1 = String((thisMonth+1) + "/01/" + (thisYear + 1));
var sPrevYear2 = String((thisMonth+1) + "/01/" + (thisYear - 2));
var sNextYear2 = String((thisMonth+1) + "/01/" + (thisYear + 2));
var tmpDate = new Date( sNextMonth );
tmpDate = new Date( tmpDate.valueOf() - 1001 );
lastDate = tmpDate.getDate();
var monthNames = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
var styles = "<style><!-- body{font-family:Arial,Helvetica,sans-serif;font-size:9pt}; td { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666}; A { text-decoration: none; };TD.day { border-bottom: solid black; border-width: 1px; }--></style>"
var cellAttribs = "align="center" class="day" BGCOLOR=white onMouseOver="temp=this.style.backgroundColor;this.style.backgroundColor='#cccccc';" onMouseOut="this.style.backgroundColor=temp;""
var cellAttribs2 = "align="center" BGCOLOR=white onMouseOver="temp=this.style.backgroundColor;this.style.backgroundColor='#cccccc';" onMouseOut="this.style.backgroundColor=temp;""
var htmlHead = "<HTML><HEAD>" + styles + "</HEAD><BODY BGCOLOR="#FFFFFF" TEXT="#000000">";
var htmlTail = "</BODY></HTML>";
var closeAnchor = "<A HREF="javascript:window.opener.closeCalPopup()">Close</A>";
var todayAnchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sToday+"','"+dstWindowName+"','"+fieldLabel+"');">Today</A>";
var prevMonthAnchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sPrevMonth+"','"+dstWindowName+"','"+fieldLabel+"');">" + monthNames[nPrevMonth] + "</A>";
var nextMonthAnchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sNextMonth+"','"+dstWindowName+"','"+fieldLabel+"');">" + monthNames[nNextMonth] + "</A>";
var prevYear1Anchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sPrevYear1+"','"+dstWindowName+"','" + fieldLabel + "');"><<</A>";
var nextYear1Anchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sNextYear1+"','"+dstWindowName+"','" + fieldLabel + "');">>></A>";
var prevYear2Anchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sPrevYear2+"','"+dstWindowName+"','" + fieldLabel + "');"><<<</A>";
var nextYear2Anchor = "<A HREF="javascript:window.opener.reloadCalPopup('"+sNextYear2+"','"+dstWindowName+"','" + fieldLabel + "');">>>></A>";
popCalData += (htmlHead + fnt[1]);
//popCalData += ("<font face='arial'>" + fieldLabel + "<BR>");
popCalData += "<DIV align="center">";
popCalData += "<TABLE BORDER="0" cellspacing="0" callpadding="0" width="220"><TR><TD width="45"> </TD>";
//popCalData += ("<TD width="45" align="center" " + cellAttribs2);
//popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sPrevYear2+"','"+dstWindowName+"','" + fieldLabel + "')">"); //popCalData += (fnt[0]+prevYear2Anchor+"</FONT></TD>");
popCalData += ("<TD width="45" align="center" " + cellAttribs2);
popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sPrevYear1+"','"+dstWindowName+"','" + fieldLabel + "')">");
popCalData += (fnt[0]+prevYear1Anchor+"</FONT></TD>");
popCalData += ("<TD width="40" align="center" "+cellAttribs2);
popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sToday+"','"+dstWindowName+"','" + fieldLabel + "')">");
popCalData += (fnt[0]+todayAnchor+"</FONT></TD>");
popCalData += ("<TD width="45" align="center" "+cellAttribs2);
popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sNextYear1+"','"+dstWindowName+"','" + fieldLabel + "')">");
popCalData += (fnt[0]+nextYear1Anchor+"</FONT></TD><TD width="45"> </TD>");
//popCalData += ("<TD width="45" align="center" "+cellAttribs2);
//popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sNextYear2+"','"+dstWindowName+"','" + fieldLabel + "')">");
//popCalData += (fnt[0]+nextYear2Anchor+"</FONT></TD>");
popCalData += "</TR></TABLE>";
popCalData += "<TABLE BORDER="0" cellspacing="0" callpadding="0" width="220">";
popCalData += ("<TR><TD width="55" align="center" "+cellAttribs2);
popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sPrevMonth+"','"+dstWindowName+"','" + fieldLabel + "')">");
popCalData += (fnt[0]+prevMonthAnchor+"</FONT></TD>");
popCalData += "<TD width="110" align="center">";
popCalData += ("  "+fnt[1]+monthNames[thisMonth]+ ", "+thisYear+"  </FONT></TD>");
popCalData += ("<TD width="55" align="center" "+cellAttribs2);
popCalData += (" onClick="javascript:window.opener.reloadCalPopup('"+sNextMonth+"','"+dstWindowName+"','" + fieldLabel + "')">");
popCalData += (fnt[0]+nextMonthAnchor+"</FONT></TD></TR></TABLE><BR>");
popCalData += ("<TABLE BORDER="0" cellspacing="2" cellpadding="1">" );
popCalData += ("");
popCalData += ("<TR><TD>"+fnt[1]+"Sun</FONT></TD><TD>");
popCalData += (fnt[1]+"Mon</FONT></TD><TD>"+fnt[1]+"Tue</FONT></TD><TD>");

popCalData += (fnt[1]+"Wed</FONT></TD><TD>"+fnt[1]+"Thu</FONT></TD><TD>");

popCalData += (fnt[1]+"Fri</FONT></TD><TD>"+fnt[1]+"Sat</FONT></TD></TR>");
var calDay = 0;
var monthDate = 1;
var weekDay = firstDay.getDay();
do {
popCalData += ("<TR>");
for (calDay = 0; calDay < 7; calDay++ ){
if((weekDay != calDay) || (monthDate > lastDate)){
popCalData += ("<TD>"+fnt[1]+" </FONT></TD>");
continue;
}
else {
anchorVal = "<A HREF="javascript:window.opener.calPopupSetDate(window.opener.popCalDstFld,'" + (thisMonth+1) + "/" + monthDate + "/" + thisYear + "');window.opener.closeCalPopup()">";
jsVal = "javascript:window.opener.calPopupSetDate(window.opener.popCalDstFld,'" + (thisMonth+1) + "/" + monthDate + "/" + thisYear + "');window.opener.closeCalPopup()";
//anchorVal = "<A HREF="javascript:window.opener.calPopupSetDate(window.opener.popCalDstFld,'" + (thisMonth+1) + "/" + monthDate + "/" + thisYear + "')">";
//jsVal = "javascript:window.opener.calPopupSetDate(window.opener.popCalDstFld,'" + (thisMonth+1) + "/" + monthDate + "/" + thisYear + "')";
popCalData += ("<TD "+cellAttribs+" onClick=""+jsVal+"">");
if ((firstDay.getMonth() == dtToday.getMonth()) &&
(monthDate == dtToday.getDate()) &&
(thisYear == dtToday.getFullYear()) ){
popCalData += (anchorVal+fnt[2]+monthDate+"</A></FONT></TD>");
}
else{
popCalData += (anchorVal+fnt[1]+monthDate+"</A></FONT></TD>");
}
weekDay++;
monthDate++;
}
}
weekDay = 0;
} while( monthDate <= lastDate );
popCalData += ("</TABLE></DIV><BR>");
popCalData += (closeAnchor+"</FONT>"+htmlTail);
return( popCalData );
}
function calPopupSetDate()
{
calPopupSetDate.arguments[0].value = calPopupSetDate.arguments[1];
calPopupSetDate.arguments[0].text = calPopupSetDate.arguments[1];
}

This was first published in November 2000

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.