Javascript Popup Calendar

In the client, add a layout region to a form & put a date field in it, resulting in a popup calendar for date selection.

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 last published in November 2000

Dig Deeper on Domino Resources - Part 4

Start the conversation

Send me notifications when other members comment.

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

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchDataCenter

SearchExchange

SearchContentManagement

Close