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

Dig deeper on Domino Resources - Part 4

0 comments

Oldest 

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:

-ADS BY GOOGLE

SearchWinIT

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

SearchVirtualDataCentre.co.UK

Close