1 // <script language="javascript">
3 var weekendColor = "#e0e0e0";
4 var fontface = "Verdana";
5 var fontsize = 8; // in "pt" units; used with "font-size" style element
12 Calendar.Months = ["January", "February", "March", "April", "May", "June",
13 "July", "August", "September", "October", "November", "December"];
15 // Non-Leap year Month days..
16 Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
17 // Leap year Month days..
18 Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
20 function Calendar(p_item, p_month, p_year, p_format) {
21 if ((p_month == null) && (p_year == null)) return;
23 if (p_month == null) {
24 this.gMonthName = null;
28 this.gMonthName = Calendar.get_month(p_month);
29 this.gMonth = new Number(p_month);
34 this.gFormat = p_format;
35 this.gBGColor = "white";
36 this.gFGColor = "black";
37 this.gTextColor = "black";
38 this.gHeaderColor = "black";
39 this.gReturnItem = p_item;
42 Calendar.get_month = Calendar_get_month;
43 Calendar.get_daysofmonth = Calendar_get_daysofmonth;
44 Calendar.calc_month_year = Calendar_calc_month_year;
46 function Calendar_get_month(monthNo) {
47 return Calendar.Months[monthNo];
50 function Calendar_get_daysofmonth(monthNo, p_year) {
52 Check for leap year ..
53 1.Years evenly divisible by four are normally leap years, except for...
54 2.Years also evenly divisible by 100 are not leap years, except for...
55 3.Years also evenly divisible by 400 are leap years.
57 if ((p_year % 4) == 0) {
58 if ((p_year % 100) == 0 && (p_year % 400) != 0)
59 return Calendar.DOMonth[monthNo];
61 return Calendar.lDOMonth[monthNo];
63 return Calendar.DOMonth[monthNo];
66 function Calendar_calc_month_year(p_Month, p_Year, incr) {
68 Will return an 1-D array with 1st element being the calculated month
69 and second being the calculated year
70 after applying the month increment/decrement as specified by 'incr' parameter.
71 'incr' will normally have 1/-1 to navigate thru the months.
73 var ret_arr = new Array();
79 ret_arr[1] = parseInt(p_Year) - 1;
82 ret_arr[0] = parseInt(p_Month) - 1;
83 ret_arr[1] = parseInt(p_Year);
85 } else if (incr == 1) {
89 ret_arr[1] = parseInt(p_Year) + 1;
92 ret_arr[0] = parseInt(p_Month) + 1;
93 ret_arr[1] = parseInt(p_Year);
100 function Calendar_calc_month_year(p_Month, p_Year, incr) {
102 Will return an 1-D array with 1st element being the calculated month
103 and second being the calculated year
104 after applying the month increment/decrement as specified by 'incr' parameter.
105 'incr' will normally have 1/-1 to navigate thru the months.
107 var ret_arr = new Array();
113 ret_arr[1] = parseInt(p_Year) - 1;
116 ret_arr[0] = parseInt(p_Month) - 1;
117 ret_arr[1] = parseInt(p_Year);
119 } else if (incr == 1) {
123 ret_arr[1] = parseInt(p_Year) + 1;
126 ret_arr[0] = parseInt(p_Month) + 1;
127 ret_arr[1] = parseInt(p_Year);
134 // This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
137 Calendar.prototype.getMonthlyCalendarCode = function() {
139 var vHeader_Code = "";
142 // Begin Table Drawing code here..
143 vCode += ("<div align=center><TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\" style='font-size:" + fontsize + "pt;'>");
145 vHeader_Code = this.cal_header();
146 vData_Code = this.cal_data();
147 vCode += (vHeader_Code + vData_Code);
149 vCode += "</TABLE></div>";
154 Calendar.prototype.show = function() {
157 // build content into global var ggWinContent
158 ggWinContent += ("<FONT FACE='" + fontface + "' ><B>");
159 ggWinContent += (this.gMonthName + " " + this.gYear);
160 ggWinContent += "</B><BR>";
162 // Show navigation buttons
163 var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
164 var prevMM = prevMMYYYY[0];
165 var prevYYYY = prevMMYYYY[1];
167 var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
168 var nextMM = nextMMYYYY[0];
169 var nextYYYY = nextMMYYYY[1];
171 ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
172 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
173 "onMouseOver=\"window.status='Go back one year'; return true;\" " +
174 "onMouseOut=\"window.status=''; return true;\" " +
176 "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
178 "\"><<Year<\/A>]</TD><TD ALIGN=center>");
179 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
180 "onMouseOver=\"window.status='Go back one month'; return true;\" " +
181 "onMouseOut=\"window.status=''; return true;\" " +
183 "'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
185 "\"><Mon</A>]</TD><TD ALIGN=center>");
186 ggWinContent += " </TD><TD ALIGN=center>";
187 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
188 "onMouseOver=\"window.status='Go forward one month'; return true;\" " +
189 "onMouseOut=\"window.status=''; return true;\" " +
191 "'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
193 "\">Mon><\/A>]</TD><TD ALIGN=center>");
194 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
195 "onMouseOver=\"window.status='Go forward one year'; return true;\" " +
196 "onMouseOut=\"window.status=''; return true;\" " +
198 "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
200 "\">Year>><\/A>]</TD></TR></TABLE><BR>");
202 // Get the complete calendar code for the month, and add it to the
204 vCode = this.getMonthlyCalendarCode();
205 ggWinContent += vCode;
208 Calendar.prototype.showY = function() {
212 ggWinContent += "<FONT FACE='" + fontface + "' ><B>"
213 ggWinContent += ("Year : " + this.gYear);
214 ggWinContent += "</B><BR>";
216 // Show navigation buttons
217 var prevYYYY = parseInt(this.gYear) - 1;
218 var nextYYYY = parseInt(this.gYear) + 1;
220 ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
221 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
222 "onMouseOver=\"window.status='Go back one year'; return true;\" " +
223 "onMouseOut=\"window.status=''; return true;\" " +
225 "'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
227 "\"><<Year<\/A>]</TD><TD ALIGN=center>");
228 ggWinContent += " </TD><TD ALIGN=center>";
229 ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
230 "onMouseOver=\"window.status='Go forward one year'; return true;\" " +
231 "onMouseOut=\"window.status=''; return true;\" " +
233 "'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
235 "\">Year>><\/A>]</TD></TR></TABLE><BR>");
237 // Get the complete calendar code for each month.
238 // start a table and first row in the table
239 ggWinContent += ("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=5 style='font-size:" + fontsize + "pt;'><TR>");
241 for (i=0; i<12; i++) {
242 // start the table cell
243 ggWinContent += "<TD ALIGN='center' VALIGN='top'>";
245 this.gMonthName = Calendar.get_month(this.gMonth);
246 vCode = this.getMonthlyCalendarCode();
247 ggWinContent += (this.gMonthName + "/" + this.gYear + "<BR>");
248 ggWinContent += vCode;
249 ggWinContent += "</TD>";
250 if (i == 3 || i == 7) {
251 ggWinContent += "</TR><TR>";
256 ggWinContent += "</TR></TABLE></font><BR>";
259 Calendar.prototype.cal_header = function() {
262 vCode = vCode + "<TR>";
263 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sun</B></FONT></TD>";
264 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mon</B></FONT></TD>";
265 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Tue</B></FONT></TD>";
266 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Wed</B></FONT></TD>";
267 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Thu</B></FONT></TD>";
268 vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Fri</B></FONT></TD>";
269 vCode = vCode + "<TD WIDTH='16%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sat</B></FONT></TD>";
270 vCode = vCode + "</TR>";
275 Calendar.prototype.cal_data = function() {
276 var vDate = new Date();
278 vDate.setMonth(this.gMonth);
279 vDate.setFullYear(this.gYear);
281 var vFirstDay=vDate.getDay();
283 var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
288 Get day for the 1st of the requested month/year..
289 Place as many blank cells before the 1st day of the month as necessary.
291 vCode = vCode + "<TR>";
292 for (i=0; i<vFirstDay; i++) {
293 vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT FACE='" + fontface + "'> </FONT></TD>";
296 // Write rest of the 1st week
297 for (j=vFirstDay; j<7; j++) {
298 vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" +
299 "<A HREF='javascript:void(0);' " +
300 "onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
301 "onMouseOut=\"window.status=' '; return true;\" " +
302 "onClick=\"document." + this.gReturnItem + ".value='" +
303 this.format_data(vDay) +
304 "';ggPosX=-1;ggPosY=-1;nd();nd();\">" +
305 this.format_day(vDay) +
310 vCode = vCode + "</TR>";
312 // Write the rest of the weeks
313 for (k=2; k<7; k++) {
314 vCode = vCode + "<TR>";
316 for (j=0; j<7; j++) {
317 vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" +
318 "<A HREF='javascript:void(0);' " +
319 "onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
320 "onMouseOut=\"window.status=' '; return true;\" " +
321 "onClick=\"document." + this.gReturnItem + ".value='" +
322 this.format_data(vDay) +
323 "';window.scroll(0,ggPosY);ggPosX=-1;ggPosY=-1;nd();nd();\">" +
324 this.format_day(vDay) +
329 if (vDay > vLastDay) {
336 vCode = vCode + "</TR>";
341 // Fill up the rest of last week with proper blanks, so that we get proper square blocks
342 for (m=1; m<(7-j); m++) {
344 vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
345 "><FONT FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
347 vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
348 "><FONT FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
354 Calendar.prototype.format_day = function(vday) {
355 var vNowDay = gNow.getDate();
356 var vNowMonth = gNow.getMonth();
357 var vNowYear = gNow.getFullYear();
359 if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
360 return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");
365 Calendar.prototype.write_weekend_string = function(vday) {
368 // Return special formatting for the weekend day.
369 for (i=0; i<weekend.length; i++) {
370 if (vday == weekend[i])
371 return (" BGCOLOR=\"" + weekendColor + "\"");
377 Calendar.prototype.format_data = function(p_day) {
379 var vMonth = 1 + this.gMonth;
380 vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
381 var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
382 var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
383 var vY4 = new String(this.gYear);
384 var vY2 = new String(this.gYear.substr(2,2));
385 var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;
387 switch (this.gFormat) {
388 case "MM\/DD\/YYYY" :
389 vData = vMonth + "\/" + vDD + "\/" + vY4;
392 vData = vMonth + "\/" + vDD + "\/" + vY2;
395 vData = vMonth + "-" + vDD + "-" + vY4;
398 vData = vY4 + "-" + vMonth + "-" + vDD;
401 vData = vMonth + "-" + vDD + "-" + vY2;
403 case "DD\/MON\/YYYY" :
404 vData = vDD + "\/" + vMon + "\/" + vY4;
407 vData = vDD + "\/" + vMon + "\/" + vY2;
410 vData = vDD + "-" + vMon + "-" + vY4;
413 vData = vDD + "-" + vMon + "-" + vY2;
415 case "DD\/MONTH\/YYYY" :
416 vData = vDD + "\/" + vFMon + "\/" + vY4;
418 case "DD\/MONTH\/YY" :
419 vData = vDD + "\/" + vFMon + "\/" + vY2;
421 case "DD-MONTH-YYYY" :
422 vData = vDD + "-" + vFMon + "-" + vY4;
425 vData = vDD + "-" + vFMon + "-" + vY2;
427 case "DD\/MM\/YYYY" :
428 vData = vDD + "\/" + vMonth + "\/" + vY4;
431 vData = vDD + "\/" + vMonth + "\/" + vY2;
434 vData = vDD + "-" + vMonth + "-" + vY4;
437 vData = vDD + "-" + vMonth + "-" + vY2;
440 vData = vMonth + "\/" + vDD + "\/" + vY4;
446 function Build(p_item, p_month, p_year, p_format) {
447 gCal = new Calendar(p_item, p_month, p_year, p_format);
449 // Customize your Calendar here..
450 gCal.gBGColor="white";
451 gCal.gLinkColor="black";
452 gCal.gTextColor="black";
453 gCal.gHeaderColor="darkgreen";
455 // initialize the content string
458 // Choose appropriate show function
460 // and, since the yearly calendar is so large, override the positioning and fontsize
461 // warning: in IE6, it appears that "select" fields on the form will still show
462 // through the "over" div; Note: you can set these variables as part of the onClick
463 // javascript code before you call the show_yearly_calendar function
464 if (ggPosX == -1) ggPosX = 10;
465 if (ggPosY == -1) ggPosY = 10;
466 if (fontsize == 8) fontsize = 6;
467 // generate the calendar
474 // if this is the first calendar popup, use autopositioning with an offset
475 if (ggPosX == -1 && ggPosY == -1) {
476 overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
477 TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
478 CAPTION, "Select a date", OFFSETX, 20, OFFSETY, -20);
479 // save where the 'over' div ended up; we want to stay in the same place if the user
480 // clicks on one of the year or month navigation links
481 if ( (ns4) || (ie4) ) {
482 ggPosX = parseInt(over.left);
483 ggPosY = parseInt(over.top);
485 ggPosX = parseInt(over.style.left);
486 ggPosY = parseInt(over.style.top);
490 // we have a saved X & Y position, so use those with the FIXX and FIXY options
491 overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
492 TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
493 CAPTION, "Select a date", FIXX, ggPosX, FIXY, ggPosY);
495 window.scroll(ggPosX, ggPosY);
498 function show_calendar() {
500 p_month : 0-11 for Jan-Dec; 12 for All Months.
501 p_year : 4-digit year
502 p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
503 p_item : Return Item.
506 p_item = arguments[0];
507 if (arguments[1] == null)
508 p_month = new String(gNow.getMonth());
510 p_month = arguments[1];
511 if (arguments[2] == "" || arguments[2] == null)
512 p_year = new String(gNow.getFullYear().toString());
514 p_year = arguments[2];
515 if (arguments[3] == null)
516 p_format = "YYYY-MM-DD";
518 p_format = arguments[3];
520 Build(p_item, p_month, p_year, p_format);
523 Yearly Calendar Code Starts here
525 function show_yearly_calendar() {
526 // Load the defaults..
527 //if (p_year == null || p_year == "")
528 // p_year = new String(gNow.getFullYear().toString());
529 //if (p_format == null || p_format == "")
530 // p_format = "YYYY-MM-DD";
532 p_item = arguments[0];
533 if (arguments[1] == "" || arguments[1] == null)
534 p_year = new String(gNow.getFullYear().toString());
536 p_year = arguments[1];
537 if (arguments[2] == null)
538 p_format = "YYYY-MM-DD";
540 p_format = arguments[2];
542 Build(p_item, null, p_year, p_format);