// =================================================================== // Author: Matt Kruse // WWW: http://www.mattkruse.com/ // // NOTICE: You may use this code for any purpose, commercial or // private, without any further permission from the author. You may // remove this notice from your final code if you wish, however it is // appreciated by the author if at least my web site address is kept. // // You may *NOT* re-distribute this code in any way except through its // use. That means, you can include it in your product, or your web // site, or any other form where the code is actually being used. You // may not put the plain javascript up on your site for download or // include it in your javascript libraries for download. // If you wish to share this code with others, please just point them // to the URL instead. // Please DO NOT link directly to my .js files from your site. Copy // the files to your server and use them there. Thank you. // =================================================================== // HISTORY // ------------------------------------------------------------------ // March 14, 2003: Added ability to disable individual dates or date // ranges, display as light gray and strike-through // March 14, 2003: Removed dependency on graypixel.gif and instead /// use table border coloring // March 12, 2003: Modified showCalendar() function to allow optional // start-date parameter // March 11, 2003: Modified select() function to allow optional // start-date parameter /* DESCRIPTION: This object implements a popup calendar to allow the user to select a date, month, quarter, or year. COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small positioning errors - usually with Window positioning - occur on the Macintosh platform. The calendar can be modified to work for any location in the world by changing which weekday is displayed as the first column, changing the month names, and changing the column headers for each day. USAGE: // Create a new CalendarPopup object of type WINDOW var cal = new CalendarPopup(); // Create a new CalendarPopup object of type DIV using the DIV named 'mydiv' var cal = new CalendarPopup('mydiv'); // Easy method to link the popup calendar with an input box. cal.select(inputObject, anchorname, dateFormat); // Same method, but passing a default date other than the field's current value cal.select(inputObject, anchorname, dateFormat, '01/02/2000'); // This is an example call to the popup calendar from a link to populate an // input box. Note that to use this, date.js must also be included!! Select // Set the type of date select to be used. By default it is 'date'. cal.setDisplayType(type); // When a date, month, quarter, or year is clicked, a function is called and // passed the details. You must write this function, and tell the calendar // popup what the function name is. // Function to be called for 'date' select receives y, m, d cal.setReturnFunction(functionname); // Function to be called for 'month' select receives y, m cal.setReturnMonthFunction(functionname); // Function to be called for 'quarter' select receives y, q cal.setReturnQuarterFunction(functionname); // Function to be called for 'year' select receives y cal.setReturnYearFunction(functionname); // Show the calendar relative to a given anchor cal.showCalendar(anchorname); // Hide the calendar. The calendar is set to autoHide automatically cal.hideCalendar(); // Set the month names to be used. Default are English month names cal.setMonthNames("January","February","March",...); // Set the month abbreviations to be used. Default are English month abbreviations cal.setMonthAbbreviations("Jan","Feb","Mar",...); // Set the text to be used above each day column. The days start with // sunday regardless of the value of WeekStartDay cal.setDayHeaders("S","M","T",...); // Set the day for the first column in the calendar grid. By default this // is Sunday (0) but it may be changed to fit the conventions of other // countries. cal.setWeekStartDay(1); // week is Monday - Saturday // Set the weekdays which should be disabled in the 'date' select popup. You can // then allow someone to only select week end dates, or Tuedays, for example cal.setDisabledWeekDays(0,1); // To disable selecting the 1st or 2nd days of the week // Selectively disable individual days or date ranges. Disabled days will not // be clickable, and show as strike-through text on current browsers. // Date format is any format recognized by parseDate() in date.js // Pass a single date to disable: cal.addDisabledDates("2003-01-01"); // Pass null as the first parameter to mean "anything up to and including" the // passed date: cal.addDisabledDates(null, "01/02/03"); // Pass null as the second parameter to mean "including the passed date and // anything after it: cal.addDisabledDates("Jan 01, 2003", null); // Pass two dates to disable all dates inbetween and including the two cal.addDisabledDates("January 01, 2003", "Dec 31, 2003"); // When the 'year' select is displayed, set the number of years back from the // current year to start listing years. Default is 2. cal.setYearSelectStartOffset(2); // Text for the word "Today" appearing on the calendar cal.setTodayText("Today"); // Set the calendar offset to be different than the default. By default it // will appear just below and to the right of the anchorname. So if you have // a text box where the date will go and and anchor immediately after the // text box, the calendar will display immediately under the text box. cal.offsetX = 20; cal.offsetY = 20; NOTES: 1) Requires the functions in AnchorPosition.js and PopupWindow.js 2) Your anchor tag MUST contain both NAME and ID attributes which are the same. For example: 3) There must be at least a space between for IE5.5 to see the anchor tag correctly. Do not do with no space. 4) When a CalendarPopup object is created, a handler for 'onmouseup' is attached to any event handler you may have already defined. Do NOT define an event handler for 'onmouseup' after you define a CalendarPopup object or the autoHide() will not work correctly. 5) The calendar popup display uses style sheets to make it look nice. */ // CONSTRUCTOR for the CalendarPopup Object function CalendarPopup() { var c; if (arguments.length>0) { c = new PopupWindow(arguments[0]); } else { c = new PopupWindow(); c.setSize(150,175); } c.offsetX = -3; c.offsetY = -134; c.autoHide(); // Calendar-specific properties c.monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); c.monthAbbreviations = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); c.dayHeaders = new Array("S","M","T","W","T","F","S"); c.returnFunction = "CalendarPopup_tmpReturnFunction"; c.returnMonthFunction = "CalendarPopup_tmpReturnMonthFunction"; c.returnQuarterFunction = "CalendarPopup_tmpReturnQuarterFunction"; c.returnYearFunction = "CalendarPopup_tmpReturnYearFunction"; c.weekStartDay = 0; c.isShowYearNavigation = false; c.displayType = "date"; c.disabledWeekDays = new Object(); c.disabledDatesExpression = ""; c.yearSelectStartOffset = 2; c.currentDate = null; c.todayText="Today"; window.CalendarPopup_targetInput = null; window.CalendarPopup_dateFormat = "mm/dd/yyyy"; // Method mappings c.setReturnFunction = CalendarPopup_setReturnFunction; c.setReturnMonthFunction = CalendarPopup_setReturnMonthFunction; c.setReturnQuarterFunction = CalendarPopup_setReturnQuarterFunction; c.setReturnYearFunction = CalendarPopup_setReturnYearFunction; c.setMonthNames = CalendarPopup_setMonthNames; c.setMonthAbbreviations = CalendarPopup_setMonthAbbreviations; c.setDayHeaders = CalendarPopup_setDayHeaders; c.setWeekStartDay = CalendarPopup_setWeekStartDay; c.setDisplayType = CalendarPopup_setDisplayType; c.setDisabledWeekDays = CalendarPopup_setDisabledWeekDays; c.addDisabledDates = CalendarPopup_addDisabledDates; c.setYearSelectStartOffset = CalendarPopup_setYearSelectStartOffset; c.setTodayText = CalendarPopup_setTodayText; c.showYearNavigation = CalendarPopup_showYearNavigation; c.showCalendar = CalendarPopup_showCalendar; c.hideCalendar = CalendarPopup_hideCalendar; c.getStyles = CalendarPopup_getStyles; c.refreshCalendar = CalendarPopup_refreshCalendar; c.getCalendar = CalendarPopup_getCalendar; c.select = CalendarPopup_select; // Return the object return c; } // Temporary default functions to be called when items clicked, so no error is thrown function CalendarPopup_tmpReturnFunction(y,m,d) { if (window.CalendarPopup_targetInput!=null) { var dt = new Date(y,m-1,d,0,0,0); window.CalendarPopup_targetInput.value = formatDate(dt,window.CalendarPopup_dateFormat); } else { alert('Use setReturnFunction() to define which function will get the clicked results!'); } } function CalendarPopup_tmpReturnMonthFunction(y,m) { alert('Use setReturnMonthFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , month='+m); } function CalendarPopup_tmpReturnQuarterFunction(y,q) { alert('Use setReturnQuarterFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , quarter='+q); } function CalendarPopup_tmpReturnYearFunction(y) { alert('Use setReturnYearFunction() to define which function will get the clicked results!\nYou clicked: year='+y); } // Set the name of the functions to call to get the clicked item function CalendarPopup_setReturnFunction(name) { this.returnFunction = name; } function CalendarPopup_setReturnMonthFunction(name) { this.returnMonthFunction = name; } function CalendarPopup_setReturnQuarterFunction(name) { this.returnQuarterFunction = name; } function CalendarPopup_setReturnYearFunction(name) { this.returnYearFunction = name; } // Over-ride the built-in month names function CalendarPopup_setMonthNames() { for (var i=0; i 0) { window.popupWindowObjects[arguments[0]].hidePopup(); } else { this.hidePopup(); } } // Refresh the contents of the calendar display function CalendarPopup_refreshCalendar(index) { var calObject = window.popupWindowObjects[index]; if (arguments.length>1) { calObject.populate(calObject.getCalendar(arguments[1],arguments[2],arguments[3],arguments[4],arguments[5])); } else { calObject.populate(calObject.getCalendar()); } calObject.refresh(); } // Populate the calendar and display it function CalendarPopup_showCalendar(anchorname) { if (arguments.length>1) { if (arguments[1]==null||arguments[1]=="") { this.currentDate=new Date(); } else { this.currentDate=new Date(parseDate(arguments[1])); } } this.populate(this.getCalendar()); this.showPopup(anchorname); } // Simple method to interface popup calendar with a text-entry box function CalendarPopup_select(inputobj, linkname, format) { var selectedDate=(arguments.length>3)?arguments[3]:null; if (!window.getDateFromFormat) { alert("calendar.select: To use this method you must also include 'date.js' for date formatting"); return; } if (this.displayType!="date"&&this.displayType!="week-end") { alert("calendar.select: This function can only be used with displayType 'date' or 'week-end'"); return; } if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") { alert("calendar.select: Input object passed is not a valid form input object"); window.CalendarPopup_targetInput=null; return; } window.CalendarPopup_targetInput = inputobj; this.currentDate=null; var time=0; if (selectedDate!=null) { time = getDateFromFormat(selectedDate,format) } else if (inputobj.value!="") { time = getDateFromFormat(inputobj.value,format); } if (selectedDate!=null || inputobj.value!="") { if (time==0) { this.currentDate=null; } else { this.currentDate=new Date(time); } } window.CalendarPopup_dateFormat = format; this.showCalendar(linkname); } // Get style block needed to display the calendar correctly function CalendarPopup_getStyles() { var result = ""; result += "\n"; return result; } // Return a string containing all the calendar code to be displayed function CalendarPopup_getCalendar() { var now = new Date(); // Reference to window if (this.type == "WINDOW") { var windowref = "window.opener."; } else { var windowref = ""; } var result = ""; // If POPUP, write entire HTML document if (this.type == "WINDOW") { result += "Calendar"+this.getStyles()+"\n"; result += '
\n'; } else { result += '
\n'; result += '
\n'; result += '
\n'; } var t144=""; // Code for DATE display (default) // ------------------------------- if (this.displayType=="date" || this.displayType=="week-end") { if (this.currentDate==null) { this.currentDate = now; } if (arguments.length > 0) { var month = arguments[0]; } else { var month = this.currentDate.getMonth()+1; } if (arguments.length > 1) { var year = arguments[1]; } else { var year = this.currentDate.getFullYear(); } var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) { daysinmonth[2] = 29; } var current_month = new Date(year,month-1,1); var display_year = year; var display_month = month; var display_date = 1; var weekday= current_month.getDay(); var offset = 0; if (weekday >= this.weekStartDay) { offset = weekday - this.weekStartDay; } else { offset = 7-this.weekStartDay+weekday; } if (offset > 0) { display_month--; if (display_month < 1) { display_month = 12; display_year--; } display_date = daysinmonth[display_month]-offset+1; } var next_month = month+1; var next_month_year = year; if (next_month > 12) { next_month=1; next_month_year++; } var last_month = month-1; var last_month_year = year; if (last_month < 1) { last_month=12; last_month_year--; } var date_class; if (this.type!="WINDOW") { result += t144; } result += '\n'; var refresh = 'javascript:'+windowref+'CalendarPopup_refreshCalendar'; var td = ''; result += td+'58>'+this.monthNames[month-1]+''; result += td+'10>>'; result += td+'10> '; result += td+'10><'; result += td+'36>'+year+''; result += td+'10>>'; } else { result += td+'22><<\n'; result += td+'100>'+this.monthNames[month-1]+' '+year+'\n'; result += td+'22>>>\n'; } result += '
<
\n'; result += '\n'; result += '\n'; var td = ' \n'; } result += '\n'; for (var row=1; row<=6; row++) { result += '\n'; for (var col=1; col<=7; col++) { if (display_month == month) { date_class = "calthismonth"; } else { date_class = "calothermonth"; } if ((display_month == this.currentDate.getMonth()+1) && (display_date==this.currentDate.getDate()) && (display_year==this.currentDate.getFullYear())) { td_class="caltoday"; } else { td_class="calmonth"; } var disabled=false; if (this.disabledDatesExpression!="") { var ds=""+display_year+LZ(display_month)+LZ(display_date); eval("disabled=("+this.disabledDatesExpression+")"); } if (disabled || this.disabledWeekDays[col-1]) { date_class=(disabled)?"disabled":"calnotclickable"; result += ' \n'; } else { var selected_date = display_date; var selected_month = display_month; var selected_year = display_year; if (this.displayType=="week-end") { var d = new Date(selected_year,selected_month-1,selected_date,0,0,0,0); d.setDate(d.getDate() + (7-col)); selected_year = d.getYear(); if (selected_year < 1000) { selected_year += 1900; } selected_month = d.getMonth()+1; selected_date = d.getDate(); } result += ' \n'; } display_date++; if (display_date > daysinmonth[display_month]) { display_date=1; display_month++; } if (display_month > 12) { display_month=1; display_year++; } } result += ''; } var current_weekday = now.getDay(); result += '\n'; result += '
'; for (var j=0; j<7; j++) { result += td+this.dayHeaders[(this.weekStartDay+j)%7]+'
'+display_date+''+display_date+'
\n'; } // Code common for MONTH, QUARTER, YEAR // ------------------------------------ if (this.displayType=="month" || this.displayType=="quarter" || this.displayType=="year") { if (arguments.length > 0) { var year = arguments[0]; } else { if (this.displayType=="year") { var year = now.getFullYear()-this.yearSelectStartOffset; } else { var year = now.getFullYear(); } } if (this.displayType!="year" && this.isShowYearNavigation) { result += t144; result += '\n'; result += ' <<\n'; result += ' '+year+'\n'; result += ' >>\n'; result += '\n'; } } // Code for MONTH display // ---------------------- if (this.displayType=="month") { // If POPUP, write entire HTML document result += '\n'; for (var i=0; i<4; i++) { result += ''; for (var j=0; j<3; j++) { var monthindex = ((i*3)+j); result += ''; } result += ''; } result += '
'+this.monthAbbreviations[monthindex]+'
\n'; } // Code for QUARTER display // ------------------------ if (this.displayType=="quarter") { result += '
\n'; for (var i=0; i<2; i++) { result += ''; for (var j=0; j<2; j++) { var quarter = ((i*2)+j+1); result += ''; } result += ''; } result += '

Q'+quarter+'

\n'; } // Code for YEAR display // --------------------- if (this.displayType=="year") { var yearColumnSize = 4; result += t144; result += '\n'; result += ' <<\n'; result += ' >>\n'; result += '\n'; result += '\n'; for (var i=0; i'+currentyear+''; } result += ''; } result += '
\n'; } // Common if (this.type == "WINDOW") { result += "\n"; } return result; }