Calendar not working...

Question

I have a following piece of code embedded in jsp but its not popping out a calendar...help plz
<li><label for="flightDepartureDate">Departing:</label> <input
          type="text" name="criteria.displayDepartureDatetime" readonly="readonly"
          onblur="updateCheckout();return true;"
          value="<c:out value="${flightSearchForm.criteria.displayDepartureDatetime}"/>"><a
          href="#showCalendar"
          onClick="displayCalendar('criteria.displayDepartureDatetime', 'false','<%= request.getContextPath() %>');">
     <img src="<cms:ref path="global" reference="images_calendar"/>"
          alt="calendar" title="calendar" /> </a> <label for="flightReturnDate">Returning:</label>
     <input type="text" NAME="criteria.displayReturnDatetime"
          onblur="updateCheckout();return true;"
          value="<c:out value="${flightSearchForm.criteria.displayReturnDatetime}"/>"><a
          href="#showCalendar"
          onClick="displayCalendar('criteria.displayReturnDatetime', 'false','<%= request.getContextPath() %>');"></li>
     <img src="<cms:ref path="global" reference="images_calendar"/>"
          alt="calendar" title="calendar" />
     </a>
     </li>
// Calendar Library
// This calendar is used when a user clicks on a link (image or text). A pop-up window is
// displayed and the user can click on an arrow to move to the next or previous month.
// When the user clicks on one of the days in the month the calendar window is closed and
// the selected date will now be displayed in the day and month option lists (focus is
// returned to the month option list).
// Usage: Add the following lines of code to your page to enable the Calendar
// component.
// // This line loads the JavaScript library for the calendar
// <script language="JavaScript" src="calendar.js"></script>
// // This line is used in conjunction with one form field (dateField).
// // *** NOTE ***
// <a href="#showCalendar
// onClick="setDateField(setDateField(document.mainForm.startDate));
// newWin = window.open('calendar.html','cal','dependent=yes,width=200,height=200')">
// <img src="../icons/icon_more.png" width=22 height=15 border=0></a>
// Note : when the calling window is an included jsp page make sure
// you use top.newWin ! Example Useage in the call centre app is :
// <a href="#showCalendar
// onClick="showCalendar('checkOutDate');
// top.newWin = window.open('<%= request.getContextPath() %>/webcontent/calendar.jsp',
// 'cal',
// 'dependent=yes,width=200,height=200, left=500,top=500');">
// <img src="<cms:ref path="search" reference="images_calendar"/>" alt="calendar" title="calendar" />
// </a>
// Required Files:
// calendar.js - contains all JavaScript functions to make the calendar work
// calendar.jsp - is the actual calendar that is opened by the initial page when
// the user clicks on icon_more.gif.
// image file - image that the user clicks on to view the calendar
// Begin user editable section ----------------------------------------------------------------------------------------
// CALENDAR COLORS
bottomBackground = "#3D70D6"; // BG COLOR OF THE BORDER OUTSIDE CALENDAR TABLE
tableBGColor = "#dfefff"; // BG COLOR OF THE CALENDAR TABLE
cellColor = "#ffffff"; // TABLE CELL BG COLOR OF THE DATE CELLS
headingCellColor = "#3d70d6"; // TABLE CELL BG COLOR OF THE WEEKDAY ABBREVIATIONS
focusColor = "#ff0000"; // TEXT COLOR OF THE DATE IN THE OPTION LIST (OR CURRENT DATE IF NONE SELECTED)
hoverColor = "#dfefff"; // TEXT COLOR OF A LINK WHEN YOU HOVER OVER IT
fontStyle = "8pt arial, helvetica"; // TEXT STYLE FOR DATES
headingFontStyle = "bold 8pt arial, helvetica"; // TEXT STYLE FOR WEEKDAY ABBREVIATIONS
// Formatting preferences
bottomBorder = false; // TRUE/FALSE (WHETHER TO DISPLAY BOTTOM CALENDAR BORDER)
tableBorder = 0; // SIZE OF CALENDAR TABLE BORDER (BOTTOM FRAME) 0=none
// End of User Editable Section ---------------------------------------------------------------------------------------
// Determine browser type
var isNav = false;
var isIE = false;
// Assume Netscape or IE
if (navigator.appName == "Netscape") {
     isNav = true;
} else {
     isIE = true;
var dateField = null;
var startDay;
var startMonth;
var startYear;
var format = null;
//used to determine if age needs to be calculated as well
var updateAge = false;
// Pre-build portions of the calendar when this JavaScript Library loads into the browser
buildCalParts();
// Calendar functions begin here --------------------------------------------------------------------------------------
Sets the initial value of the global date field
function showCalendar(inDateField, calcAge) {
     dateField = document.getElementById(inDateField);
// Set the colours of the calendar
     setCalColour();
     buildCalParts();
// Set default value of noDateSelected
     noDateSelected = 1;
     setInitialDate();
//determine if the calculateAge function on the parent must be called;
     updateAge = calcAge;
// Construct the calendar
     calDocBottom = buildBottomCalFrame();
function displayCalendar(inDateField, calcAge, calendarPath)
     // lets close the calendar window if its already open. Its safer dude!
     if (top.newWin != null) top.newWin.close();
     calendarURL = calendarPath + "/webcontent/common/calendar.html";
     showCalendar(inDateField, calcAge);
     top.newWin = window.open(calendarURL, "cal", "dependent=yes,width=200,height=200, left=500,top=500");
     top.newWin.focus();
Set the initial calendar date to today or to the existing value in dateField
function setInitialDate() {
     calDate = new Date();
     today = new Date();
     currentDate = new Date();
     if (dateField.value.length == 11) {
          noDateSelected = 0;
          var day = dateField.value.substring(0, 2);
          var month = dateField.value.substring(3, 6).toUpperCase();
          var year = dateField.value.substring(7, 11);
          calDate.setYear(year);
          calDate.setDate(1);
          if (month == "JAN") {
               calDate.setMonth(0);
          } else {
               if (month == "FEB") {
                    calDate.setMonth(1);
               } else {
                    if (month == "MAR") {
                         calDate.setMonth(2);
                    } else {
                         if (month == "APR") {
                              calDate.setMonth(3);
                         } else {
                              if (month == "MAY") {
                                   calDate.setMonth(4);
                              } else {
                                   if (month == "JUN") {
                                        calDate.setMonth(5);
                                   } else {
                                        if (month == "JUL") {
                                             calDate.setMonth(6);
                                        } else {
                                             if (month == "AUG") {
                                                  calDate.setMonth(7);
                                             } else {
                                                  if (month == "SEP") {
                                                       calDate.setMonth(8);
                                                  } else {
                                                       if (month == "OCT") {
                                                            calDate.setMonth(9);
                                                       } else {
                                                            if (month == "NOV") {
                                                                 calDate.setMonth(10);
                                                            } else {
                                                                 if (month == "DEC") {
                                                                      calDate.setMonth(11);
                                                                 } else {
                                                                      calDate.setMonth("N/A");
          calDate.setDate(day);
// IF THE INCOMING DATE IS INVALID, USE THE CURRENT DATE
     if (isNaN(calDate)) {
          noDateSelected = 1;
          calDate = new Date();
     } else {
          startDay = calDate.getDate();
          startMonth = calDate.getMonth();
          startYear = calDate.getYear();
     calDay = calDate.getDate();
     calMonth = calDate.getMonth();
// Set day value to 1... to avoid JavaScript date calculation anomalies
// (if the month changes to Feb and the day is 30, the month would change to
// March and the day would change to 2. Setting the day to 1 will prevent that)
     calDate.setDate(1);
Sets the calendar colours
function setCalColour() {
     bottomBackground = "#6598fe";
     tableBGColor = "#dfefff";
     cellColor = "#ffffff";
     hoverColor = "#dfefff";
     logo = "cal_logo_lilac.gif";
Create the calendar
function buildBottomCalFrame() {
// Start calendar document
     var calDoc = calendarBegin + "<div class=\"calender\"><table align=center border=0 width=140>" + "<tr>" + "<td align=left><a href='javascript:parent.opener.setPreviousMonth()' class='navigate'><</a></td>" + "<td style=\"font-weight:700; color:#ffffff; margin:0; padding:0; text-align:center;\">" + getMonth(calDate.getMonth()) + "</td>" + "<td align=left><a href='javascript:parent.opener.setNextMonth()' class='navigate'>></span></td>" + "</tr>";
calDoc = calDoc + "<tr>" + "<td align=left><a href='javascript:parent.opener.setPreviousYear()' class='navigate'><</span></td>" + "<td style=\"font-weight:700; color:#ffffff; margin:0; padding:0; text-align:center;\">" + calDate.getFullYear() + "</td>" + "<td align=left><a href='javascript:parent.opener.setNextYear()' class='navigate'>></span></td>" + "</tr>" + "</table></div >" + calendarTable;
     month = calDate.getMonth();
     year = calDate.getFullYear();
// Get globally tracked day value (prevents JavaScript date anomalies)
     day = calDay;
     var counter = 0;
     var days = getDaysInMonth();
// If global day value is > than days in month, highlight last day in month
     if (day > days) {
          day = days;
// Determine what day of the week the calendar starts on
     var firstOfMonth = new Date(year, month, 1);
// Get the day of the week the first day of the month falls on
     var startingPos = firstOfMonth.getDay();
     days += startingPos;
     var columnCount = 0;
// Make beginning non-date cells blank
     for (counter = 0; counter < startingPos; counter++) {
          calDoc += blankCell;
          columnCount++;
     var currentDay = 0;
     var dayType = "weekday";
// Date cells contain a number
     for (counter = startingPos; counter < days; counter++) {
          var paddingChar = " ";
          if (counter - startingPos + 1 < 10) {
               padding = "  ";
          } else {
               padding = " ";
          currentDay = counter - startingPos + 1;
// Set the type of day
          if (noDateSelected == 0 && (currentDay == startDay) && (startMonth == calDate.getMonth() && startYear == calDate.getYear())) {
               dayType = "focusDay";
          } else {
               if (noDateSelected == 1 && (currentDay == currentDate.getDate()) && (calDate.getMonth() == currentDate.getMonth())) {
                    dayType = "focusDay";
               } else {
                    dayType = "weekDay";
          calDoc += "<td align=center bgcolor='" + cellColor + "'>" + "<a class='" + dayType + "' href='javascript:parent.opener.returnDate(" + currentDay + ")'>" + padding + currentDay + paddingChar + "</a></td>";
          columnCount++;
// Start a new row when necessary
          if (columnCount % 7 == 0) {
               calDoc += "</tr><tr>";
// Make remaining non-date cells blank
     for (counter = days; counter < 42; counter++) {
          calDoc += blankCell;
          columnCount++;
// Start a new row when necessary
          if (columnCount % 7 == 0) {
               calDoc += "</tr>";
               if (counter < 41) {
                    calDoc += "<tr>";
     calDoc += calendarEnd;
     return calDoc;
Write the monthly calendar once the forward/backward arrow has been clicked on
function writeCalendar() {
// CREATE THE NEW CALENDAR FOR THE SELECTED MONTH & YEAR
     calDocBottom = buildBottomCalFrame();
     newWin.document.open();
     newWin.document.write(calDocBottom);
     newWin.document.close();
Set the global date to the previous month and refresh the calendar
function setPreviousMonth() {
     var year = calDate.getFullYear();
     var month = calDate.getMonth();
     // If month is January, set month to December and decrement the year
     if (month == 0) {
          month = 11;
          if (year > 1000) {
               year--;
               calDate.setFullYear(year);
     } else {
          month--;
     calDate.setMonth(month);
     writeCalendar();
Set the global date to the previous year and refresh the calendar
function setPreviousYear() {
     var year = calDate.getFullYear();
     year--;
     calDate.setYear(year);
     writeCalendar();
// Set the global date to next month and refresh the calendar
function setNextMonth() {
     var year = calDate.getFullYear();
     var month = calDate.getMonth();
// If month is December, set month to January and increment the year
     if (month == 11) {
          month = 0;
          year++;
          calDate.setFullYear(year);
     } else {
          month++;
     calDate.setMonth(month);
     writeCalendar();
// Set the global date to next year and refresh the calendar
function setNextYear() {
     var year = calDate.getFullYear();
     year++;
     calDate.setYear(year);
     writeCalendar();
Get number of days in the month
function getDaysInMonth() {
     var days;
     var month = calDate.getMonth() + 1;
     var year = calDate.getFullYear();
     if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
          days = 31;
     } else {
          if (month == 4 || month == 6 || month == 9 || month == 11) {
               days = 30;
          } else {
               if (month == 2) {
                    if (isLeapYear(year)) {
                         days = 29;
                    } else {
                         days = 28;
     return (days);
Check to see if the year is a leap year
function isLeapYear(Year) {
     if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) {
          return (true);
     } else {
          return (false);
Build the month select list
function getMonth(month) {
     monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// Return a string value which contains a select list of all 12 months
     return monthArray[month];
Set days of the week
function createWeekdayList() {
     daysInWeekLongName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
     daysInWeekShortName = new Array("Su", "Mo", "Tu", "We", "Th", "Fr", "Sa");
     var weekdays = "<tr bgcolor='" + headingCellColor + "'>";
// Loop through the weekday array
     for (var index = 0; index < daysInWeekShortName.length; index++) {
          weekdays += "<td class='heading' align=center>" + daysInWeekShortName[index] + "</td>";
     weekdays += "</tr>";
// Return table row of weekday abbreviations to display above the calendar
     return weekdays;
Pre-build portions of the calendar (for performance reasons)
function buildCalParts() {
// Generate weekday headers for the calendar
     weekdays = createWeekdayList();
// Build the blank cell rows
     blankCell = "<td align=center bgcolor='" + cellColor + "'>  </td>";
// Build the top portion of the calendar page using CSS to control some display elements
     calendarBegin = "<html>" + "<head>" + "<TITLE>Calendar</TITLE>" + "<style>";
calendarBegin = calendarBegin + "TD.heading { text-decoration: none; color: #ffffff; font: " + headingFontStyle + "; }";
calendarBegin = calendarBegin + "B { text-decoration: none; color: #000000; font: " + headingFontStyle + "; }";
calendarBegin = calendarBegin + "A.focusDay:link { color: " + focusColor + "; text-decoration: none; font: " + fontStyle + "; }" + "A.focusDay:hover { color: " + focusColor + "; text-decoration: none; font: " + fontStyle + "; }" + "A.focusDay:visited { color: #000000; text-decoration: none; font: " + fontStyle + "; }";
calendarBegin = calendarBegin + "A.weekday:link { color: #000000; text-decoration: none; font: " + fontStyle + "; }" + "A.weekday:hover { color: " + hoverColor + "; font: " + fontStyle + "; }" + "A.weekday:visited { color: #000000; text-decoration: none; font: " + fontStyle + "; }";
calendarBegin = calendarBegin + "A.navigate:link { font-weight:700; color:#ffffff; text-decoration: none; }" + "A.navigate:hover { font-weight:700; color:#ffffff; text-decoration: none; }" + "A.navigate:visited { font-weight:700; color:#ffffff; text-decoration: none; }";
calendarBegin = calendarBegin + "</style>" + "</head>" + "<body style=\"background-color:#3d70d6; font:normal 75% arial, helvetica, sans-serif; text-align:center; margin:0; padding:0;\">" + "<center>";
// Netscape needs a table container to display the table outlines properly
     if (isNav) {
          calendarTable = "<table CELLPADDING=0 CELLSPACING=1 border=" + tableBorder + " align=center bgcolor=\"" + tableBGColor + "\"><tr><td>" +
// Build weekday headings
          "<table CELLPADDING=0 CELLSPACING=1 border=" + tableBorder + " align=center bgcolor=\"" + tableBGColor + "\">" + weekdays + "<tr>";
     } else {
// Build weekday headings
          calendarTable = "<table CELLPADDING=0 CELLSPACING=1 border=" + tableBorder + " align=center bgcolor=\"" + tableBGColor + "\">" + weekdays + "<tr>";
// Build the bottom portion of the calendar page
     calendarEnd = "";
// Whether or not to display a thick line below the calendar
     if (bottomBorder) {
          calendarEnd += "<tr></tr>";
// Netscape needs a table container to display the table outlines properly
     if (isNav) {
          calendarEnd += "</td></tr></table>";
// End the table and the HTML document
     calendarEnd += "</table>" + "<a href='javascript: self.close ();' class='linktext' style=\"font-weight:700; color:#ffffff;\">Close Calendar Window</a>" + "</center>" + "</body>" + "</html>";
// Set form field value to the date selected and close the calendar window
function returnDate(selectedDay) {
     calDate.setDate(selectedDay);
// Set the date returned to the user
     var day = "0" + calDate.getDate();
     day = day.substring(day.length - 2, day.length);
     var month = monthArray[calDate.getMonth()];
     month = month.substring(0, 3);
     dateField.value = day + "-" + month + "-" + calDate.getFullYear();
     //dateField.focus();
// Close the calendar window
     if (updateAge === "true") {
          top.calculateAge();
     top.newWin.close();
}

Answer 1

Too much unformatted code to even try and understand.
Is this a Java/JSP question or javascript issue?
Is there an error message loading the page?
Are there any javascript notifications (check the alert bottom left of IE browser)
When does the error occur? Loading the page? Pushing the button?
My suggestion would be to
- view source on the generated HTML. See if the html is valid, and correct.
- change the onclick event of the button to pop up an "alert" so you can see it is actually getting to the button press. Then put alerts through the code you are calling to see if it is actually getting there.
cheers,
evnafets