1 | // =================================================================== |
---|
2 | // Author: Matt Kruse <matt@mattkruse.com> |
---|
3 | // WWW: http://www.mattkruse.com/ |
---|
4 | // |
---|
5 | // NOTICE: You may use this code for any purpose, commercial or |
---|
6 | // private, without any further permission from the author. You may |
---|
7 | // remove this notice from your final code if you wish, however it is |
---|
8 | // appreciated by the author if at least my web site address is kept. |
---|
9 | // |
---|
10 | // You may *NOT* re-distribute this code in any way except through its |
---|
11 | // use. That means, you can include it in your product, or your web |
---|
12 | // site, or any other form where the code is actually being used. You |
---|
13 | // may not put the plain javascript up on your site for download or |
---|
14 | // include it in your javascript libraries for download. |
---|
15 | // If you wish to share this code with others, please just point them |
---|
16 | // to the URL instead. |
---|
17 | // Please DO NOT link directly to my .js files from your site. Copy |
---|
18 | // the files to your server and use them there. Thank you. |
---|
19 | // =================================================================== |
---|
20 | |
---|
21 | // HISTORY |
---|
22 | // ------------------------------------------------------------------ |
---|
23 | // Feb 7, 2005: Fixed a CSS styles to use px unit |
---|
24 | // March 29, 2004: Added check in select() method for the form field |
---|
25 | // being disabled. If it is, just return and don't do anything. |
---|
26 | // March 24, 2004: Fixed bug - when month name and abbreviations were |
---|
27 | // changed, date format still used original values. |
---|
28 | // January 26, 2004: Added support for drop-down month and year |
---|
29 | // navigation (Thanks to Chris Reid for the idea) |
---|
30 | // September 22, 2003: Fixed a minor problem in YEAR calendar with |
---|
31 | // CSS prefix. |
---|
32 | // August 19, 2003: Renamed the function to get styles, and made it |
---|
33 | // work correctly without an object reference |
---|
34 | // August 18, 2003: Changed showYearNavigation and |
---|
35 | // showYearNavigationInput to optionally take an argument of |
---|
36 | // true or false |
---|
37 | // July 31, 2003: Added text input option for year navigation. |
---|
38 | // Added a per-calendar CSS prefix option to optionally use |
---|
39 | // different styles for different calendars. |
---|
40 | // July 29, 2003: Fixed bug causing the Today link to be clickable |
---|
41 | // even though today falls in a disabled date range. |
---|
42 | // Changed formatting to use pure CSS, allowing greater control |
---|
43 | // over look-and-feel options. |
---|
44 | // June 11, 2003: Fixed bug causing the Today link to be unselectable |
---|
45 | // under certain cases when some days of week are disabled |
---|
46 | // March 14, 2003: Added ability to disable individual dates or date |
---|
47 | // ranges, display as light gray and strike-through |
---|
48 | // March 14, 2003: Removed dependency on graypixel.gif and instead |
---|
49 | /// use table border coloring |
---|
50 | // March 12, 2003: Modified showCalendar() function to allow optional |
---|
51 | // start-date parameter |
---|
52 | // March 11, 2003: Modified select() function to allow optional |
---|
53 | // start-date parameter |
---|
54 | /* |
---|
55 | DESCRIPTION: This object implements a popup calendar to allow the user to |
---|
56 | select a date, month, quarter, or year. |
---|
57 | |
---|
58 | COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small |
---|
59 | positioning errors - usually with Window positioning - occur on the |
---|
60 | Macintosh platform. |
---|
61 | The calendar can be modified to work for any location in the world by |
---|
62 | changing which weekday is displayed as the first column, changing the month |
---|
63 | names, and changing the column headers for each day. |
---|
64 | |
---|
65 | USAGE: |
---|
66 | // Create a new CalendarPopup object of type WINDOW |
---|
67 | var cal = new CalendarPopup(); |
---|
68 | |
---|
69 | // Create a new CalendarPopup object of type DIV using the DIV named 'mydiv' |
---|
70 | var cal = new CalendarPopup('mydiv'); |
---|
71 | |
---|
72 | // Easy method to link the popup calendar with an input box. |
---|
73 | cal.select(inputObject, anchorname, dateFormat); |
---|
74 | // Same method, but passing a default date other than the field's current value |
---|
75 | cal.select(inputObject, anchorname, dateFormat, '01/02/2000'); |
---|
76 | // This is an example call to the popup calendar from a link to populate an |
---|
77 | // input box. Note that to use this, date.js must also be included!! |
---|
78 | <A HREF="#" onClick="cal.select(document.forms[0].date,'anchorname','MM/dd/yyyy'); return false;">Select</A> |
---|
79 | |
---|
80 | // Set the type of date select to be used. By default it is 'date'. |
---|
81 | cal.setDisplayType(type); |
---|
82 | |
---|
83 | // When a date, month, quarter, or year is clicked, a function is called and |
---|
84 | // passed the details. You must write this function, and tell the calendar |
---|
85 | // popup what the function name is. |
---|
86 | // Function to be called for 'date' select receives y, m, d |
---|
87 | cal.setReturnFunction(functionname); |
---|
88 | // Function to be called for 'month' select receives y, m |
---|
89 | cal.setReturnMonthFunction(functionname); |
---|
90 | // Function to be called for 'quarter' select receives y, q |
---|
91 | cal.setReturnQuarterFunction(functionname); |
---|
92 | // Function to be called for 'year' select receives y |
---|
93 | cal.setReturnYearFunction(functionname); |
---|
94 | |
---|
95 | // Show the calendar relative to a given anchor |
---|
96 | cal.showCalendar(anchorname); |
---|
97 | |
---|
98 | // Hide the calendar. The calendar is set to autoHide automatically |
---|
99 | cal.hideCalendar(); |
---|
100 | |
---|
101 | // Set the month names to be used. Default are English month names |
---|
102 | cal.setMonthNames("January","February","March",...); |
---|
103 | |
---|
104 | // Set the month abbreviations to be used. Default are English month abbreviations |
---|
105 | cal.setMonthAbbreviations("Jan","Feb","Mar",...); |
---|
106 | |
---|
107 | // Show navigation for changing by the year, not just one month at a time |
---|
108 | cal.showYearNavigation(); |
---|
109 | |
---|
110 | // Show month and year dropdowns, for quicker selection of month of dates |
---|
111 | cal.showNavigationDropdowns(); |
---|
112 | |
---|
113 | // Set the text to be used above each day column. The days start with |
---|
114 | // sunday regardless of the value of WeekStartDay |
---|
115 | cal.setDayHeaders("S","M","T",...); |
---|
116 | |
---|
117 | // Set the day for the first column in the calendar grid. By default this |
---|
118 | // is Sunday (0) but it may be changed to fit the conventions of other |
---|
119 | // countries. |
---|
120 | cal.setWeekStartDay(1); // week is Monday - Sunday |
---|
121 | |
---|
122 | // Set the weekdays which should be disabled in the 'date' select popup. You can |
---|
123 | // then allow someone to only select week end dates, or Tuedays, for example |
---|
124 | cal.setDisabledWeekDays(0,1); // To disable selecting the 1st or 2nd days of the week |
---|
125 | |
---|
126 | // Selectively disable individual days or date ranges. Disabled days will not |
---|
127 | // be clickable, and show as strike-through text on current browsers. |
---|
128 | // Date format is any format recognized by parseDate() in date.js |
---|
129 | // Pass a single date to disable: |
---|
130 | cal.addDisabledDates("2003-01-01"); |
---|
131 | // Pass null as the first parameter to mean "anything up to and including" the |
---|
132 | // passed date: |
---|
133 | cal.addDisabledDates(null, "01/02/03"); |
---|
134 | // Pass null as the second parameter to mean "including the passed date and |
---|
135 | // anything after it: |
---|
136 | cal.addDisabledDates("Jan 01, 2003", null); |
---|
137 | // Pass two dates to disable all dates inbetween and including the two |
---|
138 | cal.addDisabledDates("January 01, 2003", "Dec 31, 2003"); |
---|
139 | |
---|
140 | // When the 'year' select is displayed, set the number of years back from the |
---|
141 | // current year to start listing years. Default is 2. |
---|
142 | // This is also used for year drop-down, to decide how many years +/- to display |
---|
143 | cal.setYearSelectStartOffset(2); |
---|
144 | |
---|
145 | // Text for the word "Today" appearing on the calendar |
---|
146 | cal.setTodayText("Today"); |
---|
147 | |
---|
148 | // The calendar uses CSS classes for formatting. If you want your calendar to |
---|
149 | // have unique styles, you can set the prefix that will be added to all the |
---|
150 | // classes in the output. |
---|
151 | // For example, normal output may have this: |
---|
152 | // <SPAN CLASS="cpTodayTextDisabled">Today<SPAN> |
---|
153 | // But if you set the prefix like this: |
---|
154 | cal.setCssPrefix("Test"); |
---|
155 | // The output will then look like: |
---|
156 | // <SPAN CLASS="TestcpTodayTextDisabled">Today<SPAN> |
---|
157 | // And you can define that style somewhere in your page. |
---|
158 | |
---|
159 | // When using Year navigation, you can make the year be an input box, so |
---|
160 | // the user can manually change it and jump to any year |
---|
161 | cal.showYearNavigationInput(); |
---|
162 | |
---|
163 | // Set the calendar offset to be different than the default. By default it |
---|
164 | // will appear just below and to the right of the anchorname. So if you have |
---|
165 | // a text box where the date will go and and anchor immediately after the |
---|
166 | // text box, the calendar will display immediately under the text box. |
---|
167 | cal.offsetX = 20; |
---|
168 | cal.offsetY = 20; |
---|
169 | |
---|
170 | NOTES: |
---|
171 | 1) Requires the functions in AnchorPosition.js and PopupWindow.js |
---|
172 | |
---|
173 | 2) Your anchor tag MUST contain both NAME and ID attributes which are the |
---|
174 | same. For example: |
---|
175 | <A NAME="test" ID="test"> </A> |
---|
176 | |
---|
177 | 3) There must be at least a space between <A> </A> for IE5.5 to see the |
---|
178 | anchor tag correctly. Do not do <A></A> with no space. |
---|
179 | |
---|
180 | 4) When a CalendarPopup object is created, a handler for 'onmouseup' is |
---|
181 | attached to any event handler you may have already defined. Do NOT define |
---|
182 | an event handler for 'onmouseup' after you define a CalendarPopup object |
---|
183 | or the autoHide() will not work correctly. |
---|
184 | |
---|
185 | 5) The calendar popup display uses style sheets to make it look nice. |
---|
186 | |
---|
187 | */ |
---|
188 | |
---|
189 | // CONSTRUCTOR for the CalendarPopup Object |
---|
190 | function CalendarPopup() { |
---|
191 | var c; |
---|
192 | if (arguments.length>0) { |
---|
193 | c = new PopupWindow(arguments[0]); |
---|
194 | } |
---|
195 | else { |
---|
196 | c = new PopupWindow(); |
---|
197 | c.setSize(150,175); |
---|
198 | } |
---|
199 | c.offsetX = -152; |
---|
200 | c.offsetY = 25; |
---|
201 | c.autoHide(); |
---|
202 | // Calendar-specific properties |
---|
203 | c.monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); |
---|
204 | c.monthAbbreviations = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); |
---|
205 | c.dayHeaders = new Array("S","M","T","W","T","F","S"); |
---|
206 | c.returnFunction = "CP_tmpReturnFunction"; |
---|
207 | c.returnMonthFunction = "CP_tmpReturnMonthFunction"; |
---|
208 | c.returnQuarterFunction = "CP_tmpReturnQuarterFunction"; |
---|
209 | c.returnYearFunction = "CP_tmpReturnYearFunction"; |
---|
210 | c.weekStartDay = 0; |
---|
211 | c.isShowYearNavigation = false; |
---|
212 | c.displayType = "date"; |
---|
213 | c.disabledWeekDays = new Object(); |
---|
214 | c.disabledDatesExpression = ""; |
---|
215 | c.yearSelectStartOffset = 2; |
---|
216 | c.currentDate = null; |
---|
217 | c.todayText="Today"; |
---|
218 | c.cssPrefix=""; |
---|
219 | c.isShowNavigationDropdowns=false; |
---|
220 | c.isShowYearNavigationInput=false; |
---|
221 | window.CP_calendarObject = null; |
---|
222 | window.CP_targetInput = null; |
---|
223 | window.CP_dateFormat = "MM/dd/yyyy"; |
---|
224 | // Method mappings |
---|
225 | c.copyMonthNamesToWindow = CP_copyMonthNamesToWindow; |
---|
226 | c.setReturnFunction = CP_setReturnFunction; |
---|
227 | c.setReturnMonthFunction = CP_setReturnMonthFunction; |
---|
228 | c.setReturnQuarterFunction = CP_setReturnQuarterFunction; |
---|
229 | c.setReturnYearFunction = CP_setReturnYearFunction; |
---|
230 | c.setMonthNames = CP_setMonthNames; |
---|
231 | c.setMonthAbbreviations = CP_setMonthAbbreviations; |
---|
232 | c.setDayHeaders = CP_setDayHeaders; |
---|
233 | c.setWeekStartDay = CP_setWeekStartDay; |
---|
234 | c.setDisplayType = CP_setDisplayType; |
---|
235 | c.setDisabledWeekDays = CP_setDisabledWeekDays; |
---|
236 | c.addDisabledDates = CP_addDisabledDates; |
---|
237 | c.setYearSelectStartOffset = CP_setYearSelectStartOffset; |
---|
238 | c.setTodayText = CP_setTodayText; |
---|
239 | c.showYearNavigation = CP_showYearNavigation; |
---|
240 | c.showCalendar = CP_showCalendar; |
---|
241 | c.hideCalendar = CP_hideCalendar; |
---|
242 | c.getStyles = getCalendarStyles; |
---|
243 | c.refreshCalendar = CP_refreshCalendar; |
---|
244 | c.getCalendar = CP_getCalendar; |
---|
245 | c.select = CP_select; |
---|
246 | c.setCssPrefix = CP_setCssPrefix; |
---|
247 | c.showNavigationDropdowns = CP_showNavigationDropdowns; |
---|
248 | c.showYearNavigationInput = CP_showYearNavigationInput; |
---|
249 | c.copyMonthNamesToWindow(); |
---|
250 | // Return the object |
---|
251 | return c; |
---|
252 | } |
---|
253 | function CP_copyMonthNamesToWindow() { |
---|
254 | // Copy these values over to the date.js |
---|
255 | if (typeof(window.MONTH_NAMES)!="undefined" && window.MONTH_NAMES!=null) { |
---|
256 | window.MONTH_NAMES = new Array(); |
---|
257 | for (var i=0; i<this.monthNames.length; i++) { |
---|
258 | window.MONTH_NAMES[window.MONTH_NAMES.length] = this.monthNames[i]; |
---|
259 | } |
---|
260 | for (var i=0; i<this.monthAbbreviations.length; i++) { |
---|
261 | window.MONTH_NAMES[window.MONTH_NAMES.length] = this.monthAbbreviations[i]; |
---|
262 | } |
---|
263 | } |
---|
264 | } |
---|
265 | // Temporary default functions to be called when items clicked, so no error is thrown |
---|
266 | function CP_tmpReturnFunction(y,m,d) { |
---|
267 | if (window.CP_targetInput!=null) { |
---|
268 | var dt = new Date(y,m-1,d,0,0,0); |
---|
269 | if (window.CP_calendarObject!=null) { window.CP_calendarObject.copyMonthNamesToWindow(); } |
---|
270 | window.CP_targetInput.value = formatDate(dt,window.CP_dateFormat); |
---|
271 | } |
---|
272 | else { |
---|
273 | alert('Use setReturnFunction() to define which function will get the clicked results!'); |
---|
274 | } |
---|
275 | } |
---|
276 | function CP_tmpReturnMonthFunction(y,m) { |
---|
277 | alert('Use setReturnMonthFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , month='+m); |
---|
278 | } |
---|
279 | function CP_tmpReturnQuarterFunction(y,q) { |
---|
280 | alert('Use setReturnQuarterFunction() to define which function will get the clicked results!\nYou clicked: year='+y+' , quarter='+q); |
---|
281 | } |
---|
282 | function CP_tmpReturnYearFunction(y) { |
---|
283 | alert('Use setReturnYearFunction() to define which function will get the clicked results!\nYou clicked: year='+y); |
---|
284 | } |
---|
285 | |
---|
286 | // Set the name of the functions to call to get the clicked item |
---|
287 | function CP_setReturnFunction(name) { this.returnFunction = name; } |
---|
288 | function CP_setReturnMonthFunction(name) { this.returnMonthFunction = name; } |
---|
289 | function CP_setReturnQuarterFunction(name) { this.returnQuarterFunction = name; } |
---|
290 | function CP_setReturnYearFunction(name) { this.returnYearFunction = name; } |
---|
291 | |
---|
292 | // Over-ride the built-in month names |
---|
293 | function CP_setMonthNames() { |
---|
294 | for (var i=0; i<arguments.length; i++) { this.monthNames[i] = arguments[i]; } |
---|
295 | this.copyMonthNamesToWindow(); |
---|
296 | } |
---|
297 | |
---|
298 | // Over-ride the built-in month abbreviations |
---|
299 | function CP_setMonthAbbreviations() { |
---|
300 | for (var i=0; i<arguments.length; i++) { this.monthAbbreviations[i] = arguments[i]; } |
---|
301 | this.copyMonthNamesToWindow(); |
---|
302 | } |
---|
303 | |
---|
304 | // Over-ride the built-in column headers for each day |
---|
305 | function CP_setDayHeaders() { |
---|
306 | for (var i=0; i<arguments.length; i++) { this.dayHeaders[i] = arguments[i]; } |
---|
307 | } |
---|
308 | |
---|
309 | // Set the day of the week (0-7) that the calendar display starts on |
---|
310 | // This is for countries other than the US whose calendar displays start on Monday(1), for example |
---|
311 | function CP_setWeekStartDay(day) { this.weekStartDay = day; } |
---|
312 | |
---|
313 | // Show next/last year navigation links |
---|
314 | function CP_showYearNavigation() { this.isShowYearNavigation = (arguments.length>0)?arguments[0]:true; } |
---|
315 | |
---|
316 | // Which type of calendar to display |
---|
317 | function CP_setDisplayType(type) { |
---|
318 | if (type!="date"&&type!="week-end"&&type!="month"&&type!="quarter"&&type!="year") { alert("Invalid display type! Must be one of: date,week-end,month,quarter,year"); return false; } |
---|
319 | this.displayType=type; |
---|
320 | } |
---|
321 | |
---|
322 | // How many years back to start by default for year display |
---|
323 | function CP_setYearSelectStartOffset(num) { this.yearSelectStartOffset=num; } |
---|
324 | |
---|
325 | // Set which weekdays should not be clickable |
---|
326 | function CP_setDisabledWeekDays() { |
---|
327 | this.disabledWeekDays = new Object(); |
---|
328 | for (var i=0; i<arguments.length; i++) { this.disabledWeekDays[arguments[i]] = true; } |
---|
329 | } |
---|
330 | |
---|
331 | // Disable individual dates or ranges |
---|
332 | // Builds an internal logical test which is run via eval() for efficiency |
---|
333 | function CP_addDisabledDates(start, end) { |
---|
334 | if (arguments.length==1) { end=start; } |
---|
335 | if (start==null && end==null) { return; } |
---|
336 | if (this.disabledDatesExpression!="") { this.disabledDatesExpression+= "||"; } |
---|
337 | if (start!=null) { start = parseDate(start); start=""+start.getFullYear()+LZ(start.getMonth()+1)+LZ(start.getDate());} |
---|
338 | if (end!=null) { end=parseDate(end); end=""+end.getFullYear()+LZ(end.getMonth()+1)+LZ(end.getDate());} |
---|
339 | if (start==null) { this.disabledDatesExpression+="(ds<="+end+")"; } |
---|
340 | else if (end ==null) { this.disabledDatesExpression+="(ds>="+start+")"; } |
---|
341 | else { this.disabledDatesExpression+="(ds>="+start+"&&ds<="+end+")"; } |
---|
342 | } |
---|
343 | |
---|
344 | // Set the text to use for the "Today" link |
---|
345 | function CP_setTodayText(text) { |
---|
346 | this.todayText = text; |
---|
347 | } |
---|
348 | |
---|
349 | // Set the prefix to be added to all CSS classes when writing output |
---|
350 | function CP_setCssPrefix(val) { |
---|
351 | this.cssPrefix = val; |
---|
352 | } |
---|
353 | |
---|
354 | // Show the navigation as an dropdowns that can be manually changed |
---|
355 | function CP_showNavigationDropdowns() { this.isShowNavigationDropdowns = (arguments.length>0)?arguments[0]:true; } |
---|
356 | |
---|
357 | // Show the year navigation as an input box that can be manually changed |
---|
358 | function CP_showYearNavigationInput() { this.isShowYearNavigationInput = (arguments.length>0)?arguments[0]:true; } |
---|
359 | |
---|
360 | // Hide a calendar object |
---|
361 | function CP_hideCalendar() { |
---|
362 | if (arguments.length > 0) { window.popupWindowObjects[arguments[0]].hidePopup(); } |
---|
363 | else { this.hidePopup(); } |
---|
364 | } |
---|
365 | |
---|
366 | // Refresh the contents of the calendar display |
---|
367 | function CP_refreshCalendar(index) { |
---|
368 | var calObject = window.popupWindowObjects[index]; |
---|
369 | if (arguments.length>1) { |
---|
370 | calObject.populate(calObject.getCalendar(arguments[1],arguments[2],arguments[3],arguments[4],arguments[5])); |
---|
371 | } |
---|
372 | else { |
---|
373 | calObject.populate(calObject.getCalendar()); |
---|
374 | } |
---|
375 | calObject.refresh(); |
---|
376 | } |
---|
377 | |
---|
378 | // Populate the calendar and display it |
---|
379 | function CP_showCalendar(anchorname) { |
---|
380 | if (arguments.length>1) { |
---|
381 | if (arguments[1]==null||arguments[1]=="") { |
---|
382 | this.currentDate=new Date(); |
---|
383 | } |
---|
384 | else { |
---|
385 | this.currentDate=new Date(parseDate(arguments[1])); |
---|
386 | } |
---|
387 | } |
---|
388 | this.populate(this.getCalendar()); |
---|
389 | this.showPopup(anchorname); |
---|
390 | } |
---|
391 | |
---|
392 | // Simple method to interface popup calendar with a text-entry box |
---|
393 | function CP_select(inputobj, linkname, format) { |
---|
394 | var selectedDate=(arguments.length>3)?arguments[3]:null; |
---|
395 | if (!window.getDateFromFormat) { |
---|
396 | alert("calendar.select: To use this method you must also include 'date.js' for date formatting"); |
---|
397 | return; |
---|
398 | } |
---|
399 | if (this.displayType!="date"&&this.displayType!="week-end") { |
---|
400 | alert("calendar.select: This function can only be used with displayType 'date' or 'week-end'"); |
---|
401 | return; |
---|
402 | } |
---|
403 | if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") { |
---|
404 | alert("calendar.select: Input object passed is not a valid form input object"); |
---|
405 | window.CP_targetInput=null; |
---|
406 | return; |
---|
407 | } |
---|
408 | if (inputobj.disabled) { return; } // Can't use calendar input on disabled form input! |
---|
409 | window.CP_targetInput = inputobj; |
---|
410 | window.CP_calendarObject = this; |
---|
411 | this.currentDate=null; |
---|
412 | var time=0; |
---|
413 | if (selectedDate!=null) { |
---|
414 | time = getDateFromFormat(selectedDate,format) |
---|
415 | } |
---|
416 | else if (inputobj.value!="") { |
---|
417 | time = getDateFromFormat(inputobj.value,format); |
---|
418 | } |
---|
419 | if (selectedDate!=null || inputobj.value!="") { |
---|
420 | if (time==0) { this.currentDate=null; } |
---|
421 | else { this.currentDate=new Date(time); } |
---|
422 | } |
---|
423 | window.CP_dateFormat = format; |
---|
424 | this.showCalendar(linkname); |
---|
425 | } |
---|
426 | |
---|
427 | // Get style block needed to display the calendar correctly |
---|
428 | function getCalendarStyles() { |
---|
429 | var result = ""; |
---|
430 | var p = ""; |
---|
431 | if (this!=null && typeof(this.cssPrefix)!="undefined" && this.cssPrefix!=null && this.cssPrefix!="") { p=this.cssPrefix; } |
---|
432 | result += "<STYLE>\n"; |
---|
433 | result += "."+p+"cpYearNavigation,."+p+"cpMonthNavigation { background-color:#C0C0C0; text-align:center; vertical-align:center; text-decoration:none; color:#000000; font-weight:bold; }\n"; |
---|
434 | result += "."+p+"cpDayColumnHeader, ."+p+"cpYearNavigation,."+p+"cpMonthNavigation,."+p+"cpCurrentMonthDate,."+p+"cpCurrentMonthDateDisabled,."+p+"cpOtherMonthDate,."+p+"cpOtherMonthDateDisabled,."+p+"cpCurrentDate,."+p+"cpCurrentDateDisabled,."+p+"cpTodayText,."+p+"cpTodayTextDisabled,."+p+"cpText { font-family:arial; font-size:8pt; }\n"; |
---|
435 | result += "TD."+p+"cpDayColumnHeader { text-align:right; border:solid thin #C0C0C0;border-width:0px 0px 1px 0px; }\n"; |
---|
436 | result += "."+p+"cpCurrentMonthDate, ."+p+"cpOtherMonthDate, ."+p+"cpCurrentDate { text-align:right; text-decoration:none; }\n"; |
---|
437 | result += "."+p+"cpCurrentMonthDateDisabled, ."+p+"cpOtherMonthDateDisabled, ."+p+"cpCurrentDateDisabled { color:#D0D0D0; text-align:right; text-decoration:line-through; }\n"; |
---|
438 | result += "."+p+"cpCurrentMonthDate, .cpCurrentDate { color:#000000; }\n"; |
---|
439 | result += "."+p+"cpOtherMonthDate { color:#808080; }\n"; |
---|
440 | result += "TD."+p+"cpCurrentDate { color:white; background-color: #C0C0C0; border-width:1px; border:solid thin #800000; }\n"; |
---|
441 | result += "TD."+p+"cpCurrentDateDisabled { border-width:1px; border:solid thin #FFAAAA; }\n"; |
---|
442 | result += "TD."+p+"cpTodayText, TD."+p+"cpTodayTextDisabled { border:solid thin #C0C0C0; border-width:1px 0px 0px 0px;}\n"; |
---|
443 | result += "A."+p+"cpTodayText, SPAN."+p+"cpTodayTextDisabled { height:20px; }\n"; |
---|
444 | result += "A."+p+"cpTodayText { color:black; }\n"; |
---|
445 | result += "."+p+"cpTodayTextDisabled { color:#D0D0D0; }\n"; |
---|
446 | result += "."+p+"cpBorder { border:solid thin #808080; }\n"; |
---|
447 | result += "</STYLE>\n"; |
---|
448 | return result; |
---|
449 | } |
---|
450 | |
---|
451 | // Return a string containing all the calendar code to be displayed |
---|
452 | function CP_getCalendar() { |
---|
453 | var now = new Date(); |
---|
454 | // Reference to window |
---|
455 | if (this.type == "WINDOW") { var windowref = "window.opener."; } |
---|
456 | else { var windowref = ""; } |
---|
457 | var result = ""; |
---|
458 | // If POPUP, write entire HTML document |
---|
459 | if (this.type == "WINDOW") { |
---|
460 | result += "<HTML><HEAD><TITLE>Calendar</TITLE>"+this.getStyles()+"</HEAD><BODY MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 RIGHTMARGIN=0 LEFTMARGIN=0>\n"; |
---|
461 | result += '<CENTER><TABLE WIDTH=100% BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>\n'; |
---|
462 | } |
---|
463 | else { |
---|
464 | result += '<TABLE CLASS="'+this.cssPrefix+'cpBorder" WIDTH=144 BORDER=1 BORDERWIDTH=1 CELLSPACING=0 CELLPADDING=1>\n'; |
---|
465 | result += '<TR><TD ALIGN=CENTER>\n'; |
---|
466 | result += '<CENTER>\n'; |
---|
467 | } |
---|
468 | // Code for DATE display (default) |
---|
469 | // ------------------------------- |
---|
470 | if (this.displayType=="date" || this.displayType=="week-end") { |
---|
471 | if (this.currentDate==null) { this.currentDate = now; } |
---|
472 | if (arguments.length > 0) { var month = arguments[0]; } |
---|
473 | else { var month = this.currentDate.getMonth()+1; } |
---|
474 | if (arguments.length > 1 && arguments[1]>0 && arguments[1]-0==arguments[1]) { var year = arguments[1]; } |
---|
475 | else { var year = this.currentDate.getFullYear(); } |
---|
476 | var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31); |
---|
477 | if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) { |
---|
478 | daysinmonth[2] = 29; |
---|
479 | } |
---|
480 | var current_month = new Date(year,month-1,1); |
---|
481 | var display_year = year; |
---|
482 | var display_month = month; |
---|
483 | var display_date = 1; |
---|
484 | var weekday= current_month.getDay(); |
---|
485 | var offset = 0; |
---|
486 | |
---|
487 | offset = (weekday >= this.weekStartDay) ? weekday-this.weekStartDay : 7-this.weekStartDay+weekday ; |
---|
488 | if (offset > 0) { |
---|
489 | display_month--; |
---|
490 | if (display_month < 1) { display_month = 12; display_year--; } |
---|
491 | display_date = daysinmonth[display_month]-offset+1; |
---|
492 | } |
---|
493 | var next_month = month+1; |
---|
494 | var next_month_year = year; |
---|
495 | if (next_month > 12) { next_month=1; next_month_year++; } |
---|
496 | var last_month = month-1; |
---|
497 | var last_month_year = year; |
---|
498 | if (last_month < 1) { last_month=12; last_month_year--; } |
---|
499 | var date_class; |
---|
500 | if (this.type!="WINDOW") { |
---|
501 | result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>"; |
---|
502 | } |
---|
503 | result += '<TR>\n'; |
---|
504 | var refresh = windowref+'CP_refreshCalendar'; |
---|
505 | var refreshLink = 'javascript:' + refresh; |
---|
506 | if (this.isShowNavigationDropdowns) { |
---|
507 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="78" COLSPAN="3"><select CLASS="'+this.cssPrefix+'cpMonthNavigation" name="cpMonth" onChange="'+refresh+'('+this.index+',this.options[this.selectedIndex].value-0,'+(year-0)+');">'; |
---|
508 | for( var monthCounter=1; monthCounter<=12; monthCounter++ ) { |
---|
509 | var selected = (monthCounter==month) ? 'SELECTED' : ''; |
---|
510 | result += '<option value="'+monthCounter+'" '+selected+'>'+this.monthNames[monthCounter-1]+'</option>'; |
---|
511 | } |
---|
512 | result += '</select></TD>'; |
---|
513 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"> </TD>'; |
---|
514 | |
---|
515 | result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="56" COLSPAN="3"><select CLASS="'+this.cssPrefix+'cpYearNavigation" name="cpYear" onChange="'+refresh+'('+this.index+','+month+',this.options[this.selectedIndex].value-0);">'; |
---|
516 | for( var yearCounter=year-this.yearSelectStartOffset; yearCounter<=year+this.yearSelectStartOffset; yearCounter++ ) { |
---|
517 | var selected = (yearCounter==year) ? 'SELECTED' : ''; |
---|
518 | result += '<option value="'+yearCounter+'" '+selected+'>'+yearCounter+'</option>'; |
---|
519 | } |
---|
520 | result += '</select></TD>'; |
---|
521 | } |
---|
522 | else { |
---|
523 | if (this.isShowYearNavigation) { |
---|
524 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+last_month+','+last_month_year+');"><</A></TD>'; |
---|
525 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="58"><SPAN CLASS="'+this.cssPrefix+'cpMonthNavigation">'+this.monthNames[month-1]+'</SPAN></TD>'; |
---|
526 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+next_month+','+next_month_year+');">></A></TD>'; |
---|
527 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="10"> </TD>'; |
---|
528 | |
---|
529 | result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="'+refreshLink+'('+this.index+','+month+','+(year-1)+');"><</A></TD>'; |
---|
530 | if (this.isShowYearNavigationInput) { |
---|
531 | result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="36"><INPUT NAME="cpYear" CLASS="'+this.cssPrefix+'cpYearNavigation" SIZE="4" MAXLENGTH="4" VALUE="'+year+'" onBlur="'+refresh+'('+this.index+','+month+',this.value-0);"></TD>'; |
---|
532 | } |
---|
533 | else { |
---|
534 | result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="36"><SPAN CLASS="'+this.cssPrefix+'cpYearNavigation">'+year+'</SPAN></TD>'; |
---|
535 | } |
---|
536 | result += '<TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="10"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="'+refreshLink+'('+this.index+','+month+','+(year+1)+');">></A></TD>'; |
---|
537 | } |
---|
538 | else { |
---|
539 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+last_month+','+last_month_year+');"><<</A></TD>\n'; |
---|
540 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="100"><SPAN CLASS="'+this.cssPrefix+'cpMonthNavigation">'+this.monthNames[month-1]+' '+year+'</SPAN></TD>\n'; |
---|
541 | result += '<TD CLASS="'+this.cssPrefix+'cpMonthNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpMonthNavigation" HREF="'+refreshLink+'('+this.index+','+next_month+','+next_month_year+');">>></A></TD>\n'; |
---|
542 | } |
---|
543 | } |
---|
544 | result += '</TR></TABLE>\n'; |
---|
545 | result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=0 CELLPADDING=1 ALIGN=CENTER>\n'; |
---|
546 | result += '<TR>\n'; |
---|
547 | for (var j=0; j<7; j++) { |
---|
548 | |
---|
549 | result += '<TD CLASS="'+this.cssPrefix+'cpDayColumnHeader" WIDTH="14%"><SPAN CLASS="'+this.cssPrefix+'cpDayColumnHeader">'+this.dayHeaders[(this.weekStartDay+j)%7]+'</TD>\n'; |
---|
550 | } |
---|
551 | result += '</TR>\n'; |
---|
552 | for (var row=1; row<=6; row++) { |
---|
553 | result += '<TR>\n'; |
---|
554 | for (var col=1; col<=7; col++) { |
---|
555 | var disabled=false; |
---|
556 | if (this.disabledDatesExpression!="") { |
---|
557 | var ds=""+display_year+LZ(display_month)+LZ(display_date); |
---|
558 | eval("disabled=("+this.disabledDatesExpression+")"); |
---|
559 | } |
---|
560 | var dateClass = ""; |
---|
561 | if ((display_month == this.currentDate.getMonth()+1) && (display_date==this.currentDate.getDate()) && (display_year==this.currentDate.getFullYear())) { |
---|
562 | dateClass = "cpCurrentDate"; |
---|
563 | } |
---|
564 | else if (display_month == month) { |
---|
565 | dateClass = "cpCurrentMonthDate"; |
---|
566 | } |
---|
567 | else { |
---|
568 | dateClass = "cpOtherMonthDate"; |
---|
569 | } |
---|
570 | if (disabled || this.disabledWeekDays[col-1]) { |
---|
571 | result += ' <TD CLASS="'+this.cssPrefix+dateClass+'"><SPAN CLASS="'+this.cssPrefix+dateClass+'Disabled">'+display_date+'</SPAN></TD>\n'; |
---|
572 | } |
---|
573 | else { |
---|
574 | var selected_date = display_date; |
---|
575 | var selected_month = display_month; |
---|
576 | var selected_year = display_year; |
---|
577 | if (this.displayType=="week-end") { |
---|
578 | var d = new Date(selected_year,selected_month-1,selected_date,0,0,0,0); |
---|
579 | d.setDate(d.getDate() + (7-col)); |
---|
580 | selected_year = d.getYear(); |
---|
581 | if (selected_year < 1000) { selected_year += 1900; } |
---|
582 | selected_month = d.getMonth()+1; |
---|
583 | selected_date = d.getDate(); |
---|
584 | } |
---|
585 | result += ' <TD CLASS="'+this.cssPrefix+dateClass+'"><A HREF="javascript:'+windowref+this.returnFunction+'('+selected_year+','+selected_month+','+selected_date+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+this.cssPrefix+dateClass+'">'+display_date+'</A></TD>\n'; |
---|
586 | } |
---|
587 | display_date++; |
---|
588 | if (display_date > daysinmonth[display_month]) { |
---|
589 | display_date=1; |
---|
590 | display_month++; |
---|
591 | } |
---|
592 | if (display_month > 12) { |
---|
593 | display_month=1; |
---|
594 | display_year++; |
---|
595 | } |
---|
596 | } |
---|
597 | result += '</TR>'; |
---|
598 | } |
---|
599 | var current_weekday = now.getDay() - this.weekStartDay; |
---|
600 | if (current_weekday < 0) { |
---|
601 | current_weekday += 7; |
---|
602 | } |
---|
603 | result += '<TR>\n'; |
---|
604 | result += ' <TD COLSPAN=7 ALIGN=CENTER CLASS="'+this.cssPrefix+'cpTodayText">\n'; |
---|
605 | if (this.disabledDatesExpression!="") { |
---|
606 | var ds=""+now.getFullYear()+LZ(now.getMonth()+1)+LZ(now.getDate()); |
---|
607 | eval("disabled=("+this.disabledDatesExpression+")"); |
---|
608 | } |
---|
609 | if (disabled || this.disabledWeekDays[current_weekday+1]) { |
---|
610 | result += ' <SPAN CLASS="'+this.cssPrefix+'cpTodayTextDisabled">'+this.todayText+'</SPAN>\n'; |
---|
611 | } |
---|
612 | else { |
---|
613 | result += ' <A CLASS="'+this.cssPrefix+'cpTodayText" HREF="javascript:'+windowref+this.returnFunction+'(\''+now.getFullYear()+'\',\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'+windowref+'CP_hideCalendar(\''+this.index+'\');">'+this.todayText+'</A>\n'; |
---|
614 | } |
---|
615 | result += ' <BR>\n'; |
---|
616 | result += ' </TD></TR></TABLE></CENTER></TD></TR></TABLE>\n'; |
---|
617 | } |
---|
618 | |
---|
619 | // Code common for MONTH, QUARTER, YEAR |
---|
620 | // ------------------------------------ |
---|
621 | if (this.displayType=="month" || this.displayType=="quarter" || this.displayType=="year") { |
---|
622 | if (arguments.length > 0) { var year = arguments[0]; } |
---|
623 | else { |
---|
624 | if (this.displayType=="year") { var year = now.getFullYear()-this.yearSelectStartOffset; } |
---|
625 | else { var year = now.getFullYear(); } |
---|
626 | } |
---|
627 | if (this.displayType!="year" && this.isShowYearNavigation) { |
---|
628 | result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>"; |
---|
629 | result += '<TR>\n'; |
---|
630 | result += ' <TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-1)+');"><<</A></TD>\n'; |
---|
631 | result += ' <TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="100">'+year+'</TD>\n'; |
---|
632 | result += ' <TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="22"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+1)+');">>></A></TD>\n'; |
---|
633 | result += '</TR></TABLE>\n'; |
---|
634 | } |
---|
635 | } |
---|
636 | |
---|
637 | // Code for MONTH display |
---|
638 | // ---------------------- |
---|
639 | if (this.displayType=="month") { |
---|
640 | // If POPUP, write entire HTML document |
---|
641 | result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>\n'; |
---|
642 | for (var i=0; i<4; i++) { |
---|
643 | result += '<TR>'; |
---|
644 | for (var j=0; j<3; j++) { |
---|
645 | var monthindex = ((i*3)+j); |
---|
646 | result += '<TD WIDTH=33% ALIGN=CENTER><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnMonthFunction+'('+year+','+(monthindex+1)+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">'+this.monthAbbreviations[monthindex]+'</A></TD>'; |
---|
647 | } |
---|
648 | result += '</TR>'; |
---|
649 | } |
---|
650 | result += '</TABLE></CENTER></TD></TR></TABLE>\n'; |
---|
651 | } |
---|
652 | |
---|
653 | // Code for QUARTER display |
---|
654 | // ------------------------ |
---|
655 | if (this.displayType=="quarter") { |
---|
656 | result += '<BR><TABLE WIDTH=120 BORDER=1 CELLSPACING=0 CELLPADDING=0 ALIGN=CENTER>\n'; |
---|
657 | for (var i=0; i<2; i++) { |
---|
658 | result += '<TR>'; |
---|
659 | for (var j=0; j<2; j++) { |
---|
660 | var quarter = ((i*2)+j+1); |
---|
661 | result += '<TD WIDTH=50% ALIGN=CENTER><BR><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnQuarterFunction+'('+year+','+quarter+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">Q'+quarter+'</A><BR><BR></TD>'; |
---|
662 | } |
---|
663 | result += '</TR>'; |
---|
664 | } |
---|
665 | result += '</TABLE></CENTER></TD></TR></TABLE>\n'; |
---|
666 | } |
---|
667 | |
---|
668 | // Code for YEAR display |
---|
669 | // --------------------- |
---|
670 | if (this.displayType=="year") { |
---|
671 | var yearColumnSize = 4; |
---|
672 | result += "<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0>"; |
---|
673 | result += '<TR>\n'; |
---|
674 | result += ' <TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="50%"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-(yearColumnSize*2))+');"><<</A></TD>\n'; |
---|
675 | result += ' <TD CLASS="'+this.cssPrefix+'cpYearNavigation" WIDTH="50%"><A CLASS="'+this.cssPrefix+'cpYearNavigation" HREF="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+(yearColumnSize*2))+');">>></A></TD>\n'; |
---|
676 | result += '</TR></TABLE>\n'; |
---|
677 | result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>\n'; |
---|
678 | for (var i=0; i<yearColumnSize; i++) { |
---|
679 | for (var j=0; j<2; j++) { |
---|
680 | var currentyear = year+(j*yearColumnSize)+i; |
---|
681 | result += '<TD WIDTH=50% ALIGN=CENTER><A CLASS="'+this.cssPrefix+'cpText" HREF="javascript:'+windowref+this.returnYearFunction+'('+currentyear+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" CLASS="'+date_class+'">'+currentyear+'</A></TD>'; |
---|
682 | } |
---|
683 | result += '</TR>'; |
---|
684 | } |
---|
685 | result += '</TABLE></CENTER></TD></TR></TABLE>\n'; |
---|
686 | } |
---|
687 | // Common |
---|
688 | if (this.type == "WINDOW") { |
---|
689 | result += "</BODY></HTML>\n"; |
---|
690 | } |
---|
691 | return result; |
---|
692 | } |
---|