Hello,
I would like to create a popup graphic calendar.
I have a few choose in a dialog box etc.
N/A, TBA, TBD, OTHER, ASAP, AND CHOOSE DATE.
If user selects choose date I would like calendar to popup or show up from hiddening.
Does any one now how to do this?
carlos.
Subject: popup a graphic calendar
Here is a piecie of code I found somewhere on the internet (don’t remember where exactly). It has been modified to accept dates in the format of yyyy-mm-dd (which wasn’t included in the original code).
In JSHeader:
\n");this.wwrite("</head>");
this.wwrite("<body " +
"link=\"" + this.gLinkColor + "\" " +
"vlink=\"" + this.gLinkColor + "\" " +
"alink=\"" + this.gLinkColor + "\" " +
"text=\"" + this.gTextColor + "\">");
this.wwrite("<FONT FACE='" + fontface + "' SIZE=2><B>");
this.wwrite("Year : " + this.gYear);
this.wwrite("</B><BR>");
// Show navigation buttons
var prevYYYY = parseInt(this.gYear) - 1;
var nextYYYY = parseInt(this.gYear) + 1;
this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");
this.wwrite("<A HREF=\"" +
"javascript:window.opener.Build(" +
"'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
");" +
"\" alt='Prev Year'><<<\/A></TD><TD ALIGN=center>");
this.wwrite("<A HREF=\"javascript:window.print();\">Print</A></TD><TD ALIGN=center>");
this.wwrite("<A HREF=\"" +
"javascript:window.opener.Build(" +
"'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
");" +
"\">>><\/A></TD></TR></TABLE><BR>");
// Get the complete calendar code for each month..
var j;
for (i=11; i>=0; i--) {
if (isIE)
this.wwrite("<DIV ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");
else if (isNav)
this.wwrite("<LAYER ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");
this.gMonth = i;
this.gMonthName = Calendar.get_month(this.gMonth);
vCode = this.getMonthlyCalendarCode();
this.wwrite(this.gMonthName + "/" + this.gYear + "<BR>");
this.wwrite(vCode);
if (isIE)
this.wwrite("</DIV>");
else if (isNav)
this.wwrite("</LAYER>");
}
this.wwrite("</font><BR></body></html>");
this.gWinCal.document.close();
}
Calendar.prototype.wwrite = function(wtext) {
this.gWinCal.document.writeln(wtext);
}
Calendar.prototype.wwriteA = function(wtext) {
this.gWinCal.document.write(wtext);
}
Calendar.prototype.cal_header = function() {
var vCode = "";
vCode = vCode + "<TR>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sun</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mon</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Tue</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Wed</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Thu</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Fri</B></FONT></TD>";
vCode = vCode + "<TD WIDTH='16%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sat</B></FONT></TD>";
vCode = vCode + "</TR>";
return vCode;
}
Calendar.prototype.cal_data = function() {
var vDate = new Date();
vDate.setDate(1);
vDate.setMonth(this.gMonth);
vDate.setFullYear(this.gYear);
var vFirstDay=vDate.getDay();
var vDay=1;
var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
var vOnLastDay=0;
var vCode = "";
/*
Get day for the 1st of the requested month/year..
Place as many blank cells before the 1st day of the month as necessary.
*/
vCode = vCode + "<TR>";
for (i=0; i<vFirstDay; i++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT SIZE='2' FACE='" + fontface + "'> </FONT></TD>";
}
// Write rest of the 1st week
for (j=vFirstDay; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +
"<A HREF='#' " +
"onClick=\"self.opener." + this.gReturnItem + "='" + this.format_data(vDay) +
"';window.close();\">" +
this.format_day(vDay) +
"</A>" +
"</FONT></TD>";
vDay=vDay + 1;
}
vCode = vCode + "</TR>";
// Write the rest of the weeks
for (k=2; k<7; k++) {
vCode = vCode + "<TR>";
for (j=0; j<7; j++) {
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +
"<A HREF='#' " +
"onClick=\"self.opener." + this.gReturnItem + "='" + this.format_data(vDay) +
"';window.close();\">" +
this.format_day(vDay) +
"</A>" +
"</FONT></TD>";
vDay=vDay + 1;
if (vDay > vLastDay) {
vOnLastDay = 1;
break;
}
}
if (j == 6)
vCode = vCode + "</TR>";
if (vOnLastDay == 1)
break;
}
// Fill up the rest of last week with proper blanks, so that we get proper square blocks
for (m=1; m<(7-j); m++) {
if (this.gYearly)
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
"><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
else
vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
"><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
}
return vCode;
}
Calendar.prototype.format_day = function(vday) {
var vNowDay = gNow.getDate();
var vNowMonth = gNow.getMonth();
var vNowYear = gNow.getFullYear();
if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");
else
return (vday);
}
Calendar.prototype.write_weekend_string = function(vday) {
var i;
// Return special formatting for the weekend day.
for (i=0; i<weekend.length; i++) {
if (vday == weekend[i])
return (" BGCOLOR=\"" + weekendColor + "\"");
}
return "";
}
Calendar.prototype.format_data = function(p_day) {
var vData;
var vMonth = 1 + this.gMonth;
vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
var vY4 = new String(this.gYear);
var vY2 = new String(this.gYear.substr(2,2));
var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;
switch (this.gFormat) {
case "MM\/DD\/YYYY" :
vData = vMonth + "\/" + vDD + "\/" + vY4;
break;
case "MM\/DD\/YY" :
vData = vMonth + "\/" + vDD + "\/" + vY2;
break;
case "MM-DD-YYYY" :
vData = vMonth + "-" + vDD + "-" + vY4;
break;
case "MM-DD-YY" :
vData = vMonth + "-" + vDD + "-" + vY2;
break;
case "DD\/MON\/YYYY" :
vData = vDD + "\/" + vMon + "\/" + vY4;
break;
case "DD\/MON\/YY" :
vData = vDD + "\/" + vMon + "\/" + vY2;
break;
case "DD-MON-YYYY" :
vData = vDD + "-" + vMon + "-" + vY4;
break;
case "DD-MON-YY" :
vData = vDD + "-" + vMon + "-" + vY2;
break;
case "DD\/MONTH\/YYYY" :
vData = vDD + "\/" + vFMon + "\/" + vY4;
break;
case "DD\/MONTH\/YY" :
vData = vDD + "\/" + vFMon + "\/" + vY2;
break;
case "DD-MONTH-YYYY" :
vData = vDD + "-" + vFMon + "-" + vY4;
break;
case "DD-MONTH-YY" :
vData = vDD + "-" + vFMon + "-" + vY2;
break;
case "DD\/MM\/YYYY" :
vData = vDD + "\/" + vMonth + "\/" + vY4;
break;
case "DD\/MM\/YY" :
vData = vDD + "\/" + vMonth + "\/" + vY2;
break;
case "DD-MM-YYYY" :
vData = vDD + "-" + vMonth + "-" + vY4;
break;
case "DD-MM-YY" :
vData = vDD + "-" + vMonth + "-" + vY2;
break;
case "YYYY-MM-DD" :
vData = vY4 + "-" + vMonth + "-" + vDD;
break;
default :
vData = vMonth + "\/" + vDD + "\/" + vY4;
}
return vData;
}
function Build(p_item, p_month, p_year, p_format) {
var p_WinCal = ggWinCal;
gCal = new Calendar(p_item, p_WinCal, p_month, p_year, p_format);
// Customize your Calendar here..
gCal.gBGColor="white";
gCal.gLinkColor="black";
gCal.gTextColor="black";
gCal.gHeaderColor="darkgreen";
// Choose appropriate show function
if (gCal.gYearly) gCal.showY();
else gCal.show();
}
function show_calendar() {
/*
p_month : 0-11 for Jan-Dec; 12 for All Months.
p_year : 4-digit year
p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
p_item : Return Item.
*/
p_item = arguments[0];
if (arguments[1] == null)
p_month = new String(gNow.getMonth());
else
p_month = arguments[1];
if (arguments[2] == "" || arguments[2] == null)
p_year = new String(gNow.getFullYear().toString());
else
p_year = arguments[2];
if (arguments[3] == null)
//p_format = "MM/DD/YYYY";
p_format = "YYYY-MM-DD";
else
p_format = arguments[3];
vWinCal = window.open("", "Calendar",
"width=250,height=250,status=no,resizable=no,top=200,left=200");
vWinCal.opener = self;
ggWinCal = vWinCal;
Build(p_item, p_month, p_year, p_format);
}
/*
Yearly Calendar Code Starts here
*/
function show_yearly_calendar(p_item, p_year, p_format) {
// Load the defaults..
if (p_year == null || p_year == "")
p_year = new String(gNow.getFullYear().toString());
if (p_format == null || p_format == "")
p_format = "MM/DD/YYYY";
var vWinCal = window.open("", "Calendar", "scrollbars=yes");
vWinCal.opener = self;
ggWinCal = vWinCal;
Build(p_item, null, p_year, p_format);
}
// →
And in a button or in onClick event of a field:
show_calendar(‘document.forms[0].MyDateField.value’)
Change ‘MyDateField’ to the name of the field where You would like to have the date stored. Remember that the field must be editable and present on the form. You can hide it by setting the HTML properties: Type=hidden. This will cause the field to be hidden, but visible in the sourcecode.
hth