00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032 var calendarPopup_BORDER = "1px solid #aaa";
00033 var calendarPopup_BACKGROUND_COLOR = "rgba(0,0,0,0.8)";
00034 var calendarPopup_FONT_COLOR = "white";
00035
00036 var calendarPopup_Z = 1000000;
00037 var calendarPopup_W = 180;
00038 var calendarPopup_H = 186;
00039 var calendarPopup_CALID = "calendarPopup";
00040 var calendarPopup_MIN_YEAR = 2013;
00041 var calendarPopup_MAX_YEAR = 0;
00042
00043 var calendarPopup_HEADER_H = 35;
00044 var calendarPopup_DATES_H = 110;
00045 var calendarPopup_DATES_OFFY = 28;
00046 var calendarPopup_DATES_HDR_H = 15;
00047
00048
00049 var calendarPopup_HANDLER;
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00064
00065
00066
00067
00068 function calendarPopup(x, y, calendarHandler) {
00069
00070 calendarPopup_HANDLER = calendarHandler;
00071
00072
00073 cancelCalendar();
00074
00075 el = document.createElement("div");
00076 el.setAttribute("id", calendarPopup_CALID);
00077 el.style.zIndex = calendarPopup_Z;
00078 el.style.position = "absolute";
00079 el.style.overflow = "hidden";
00080 el.style.left = x + "px";
00081 el.style.top = y + "px";
00082 el.style.width = calendarPopup_W + "px";
00083 el.style.height = calendarPopup_H + "px";
00084
00085 el.style.backgroundColor = calendarPopup_BACKGROUND_COLOR;
00086 el.style.border = calendarPopup_BORDER;
00087 el.style.color = calendarPopup_FONT_COLOR;
00088
00089 document.body.appendChild(el);
00090
00091 calendarPopupAddHeader();
00092 calendarPopupAddMonthNav();
00093 calendarPopupAddDates();
00094 calendarPopupAddFooter();
00095 }
00096
00097
00098
00099 function calendarPopupAddHeader() {
00100
00101 var calEl = document.getElementById(calendarPopup_CALID);
00102 el = document.createElement("div");
00103 el.setAttribute("id", calendarPopup_CALID + "-header");
00104 el.style.position = "absolute";
00105 el.style.left = 0 + "px";
00106 el.style.top = 0 + "px";
00107 el.style.width = calendarPopup_W + "px";
00108 el.style.height = calendarPopup_HEADER_H + "px";
00109 el.style.borderBottom = calendarPopup_BORDER;
00110
00111 calEl = calEl.appendChild(el);
00112 var subCalEl;
00113
00114
00115 el = document.createElement("select");
00116 el.setAttribute("id", calendarPopup_CALID + "-monthSelect");
00117 el.style.color = "black";
00118 el.setAttribute("title", "Select a month from the dropdown");
00119 el.style.margin = "5px";
00120 el.style.cssFloat = "left";
00121 el.style.width = 70 + "px";
00122 el.onchange = handleSelection;
00123
00124 subCalEl = calEl.appendChild(el);
00125
00126 el = document.createElement("option");
00127 el.style.color = "black";
00128 el.text = "Month";
00129 subCalEl.add(el,null);
00130
00131 var mDate = parseInt((new Date("Jan 1, 2013")).getTime());
00132 for(var i=0;i<12;++i, mDate += 1000*60*60*24*32)
00133 {
00134 el = document.createElement("option");
00135 el.style.color = "black";
00136 el.text = (new Date(mDate)).toDateString().split(" ")[1];
00137 subCalEl.add(el,null);
00138 }
00139
00140
00141 el = document.createElement("select");
00142 el.setAttribute("id", calendarPopup_CALID + "-yearSelect");
00143 el.style.color = "black";
00144 el.setAttribute("title", "Select a month from the dropdown");
00145 el.style.margin = "5px";
00146 el.style.cssFloat = "left";
00147 el.style.width = 70 + "px";
00148 el.onchange = handleSelection;
00149
00150 subCalEl = calEl.appendChild(el);
00151
00152 el = document.createElement("option");
00153
00154 var yDate = parseInt((new Date()).getFullYear());
00155
00156 var yMin = parseInt(calendarPopup_MIN_YEAR)?parseInt(calendarPopup_MIN_YEAR):yDate;
00157 var yMax = parseInt(calendarPopup_MAX_YEAR)?parseInt(calendarPopup_MAX_YEAR):yDate;
00158 for(var i=yMin;i<=yMax;++i)
00159 {
00160 el = document.createElement("option");
00161 el.style.color = "black";
00162 el.text = i;
00163 subCalEl.add(el,null);
00164 if(yDate == i) el.defaultSelected = true;
00165 }
00166
00167
00168 el = document.createElement("div");
00169 el.setAttribute("id", calendarPopup_CALID + "-cancel");
00170 el.setAttribute("title", "Cancel date select");
00171 el.style.margin = "5px";
00172 el.style.cssFloat = "left";
00173 el.style.width = 10 + "px";
00174 el.style.height = 10 + "px";
00175 el.innerHTML = "<b>X</b>";
00176 el.style.fontFamily = "arial";
00177 el.style.cursor = "pointer";
00178
00179 el.onmouseup = cancelCalendar;
00180 calEl.appendChild(el);
00181 }
00182
00183
00184
00185 function cancelCalendar() {
00186 var el = document.getElementById(calendarPopup_CALID);
00187 if(el)
00188 el.parentNode.removeChild(el);
00189 }
00190
00191
00192 function calendarPopupAddMonthNav() {
00193
00194 var calEl = document.getElementById(calendarPopup_CALID);
00195
00196 el = document.createElement("div");
00197 el.setAttribute("id", calendarPopup_CALID + "-monthNav");
00198 el.style.position = "absolute";
00199 el.style.left = 0 + "px";
00200 el.style.top = calendarPopup_HEADER_H + "px";
00201 el.style.width = calendarPopup_W + "px";
00202
00203 calEl = calEl.appendChild(el);
00204
00205 var navW = 25;
00206
00207
00208 el = document.createElement("div");
00209 el.setAttribute("title", "Prev Month");
00210 el.style.margin = "5px";
00211 el.style.cssFloat = "left";
00212 el.style.width = navW + "px";
00213 el.innerHTML = "<b><<<</b>";
00214 el.style.fontFamily = "arial";
00215 el.style.cursor = "pointer";
00216 el.style.textAlign = "center";
00217
00218 el.onmouseup = previousMonth;
00219 calEl.appendChild(el);
00220
00221
00222 el = document.createElement("div");
00223 el.setAttribute("id", calendarPopup_CALID + "-monthYearDisplay");
00224 el.style.cssFloat = "left";
00225 el.style.width = (calendarPopup_W - navW*2 - 20) + "px";
00226 var todayArr = (new Date()).toDateString().split(" ");
00227 el.innerHTML = todayArr[1] + " " + todayArr[3];
00228 el.style.fontWeight = "800";
00229 el.style.textAlign = "center";
00230 el.style.cursor = "default";
00231 el.style.marginTop = "5px";
00232
00233 calEl.appendChild(el);
00234
00235
00236 el = document.createElement("div");
00237 el.setAttribute("title", "Prev Month");
00238 el.style.margin = "5px";
00239 el.style.cssFloat = "right";
00240 el.style.width = navW + "px";
00241 el.innerHTML = "<b>>>></b>";
00242 el.style.fontFamily = "arial";
00243 el.style.cursor = "pointer";
00244 el.style.textAlign = "center";
00245
00246 el.onmouseup = nextMonth;
00247 calEl.appendChild(el);
00248
00249
00250 el = document.createElement("div");
00251 el.setAttribute("id", calendarPopup_CALID + "-currMonth");
00252 el.style.display = "none";
00253 el.innerHTML = (new Date()).getMonth();
00254 calEl.appendChild(el);
00255 el = document.createElement("div");
00256 el.setAttribute("id", calendarPopup_CALID + "-currYear");
00257 el.style.display = "none";
00258 el.innerHTML = (new Date()).getFullYear();
00259 calEl.appendChild(el);
00260
00261 }
00262
00263
00264
00265 function previousMonth() {
00266 var el = document.getElementById(calendarPopup_CALID + "-currMonth");
00267 var newMo = parseInt(el.innerHTML)-1;
00268 var yel = document.getElementById(calendarPopup_CALID + "-currYear");
00269 if(newMo < 0)
00270 {
00271 newMo = 11;
00272 yel.innerHTML = parseInt(yel.innerHTML)-1;
00273 }
00274 el.innerHTML = newMo;
00275 el = document.getElementById(calendarPopup_CALID + "-monthYearDisplay");
00276 var dayArr = (new Date(yel.innerHTML,newMo,1)).toDateString().split(" ");
00277 el.innerHTML = dayArr[1] + " " + dayArr[3];
00278 redrawDates();
00279 }
00280
00281
00282 function nextMonth() {
00283 var el = document.getElementById(calendarPopup_CALID + "-currMonth");
00284 var newMo = parseInt(el.innerHTML)+1;
00285 var yel = document.getElementById(calendarPopup_CALID + "-currYear");
00286 if(newMo > 11)
00287 {
00288 newMo = 0;
00289 yel.innerHTML = parseInt(yel.innerHTML)+1;
00290 }
00291 el.innerHTML = newMo;
00292 el = document.getElementById(calendarPopup_CALID + "-monthYearDisplay");
00293 var dayArr = (new Date(yel.innerHTML,newMo,1)).toDateString().split(" ");
00294 el.innerHTML = dayArr[1] + " " + dayArr[3];
00295 redrawDates();
00296 }
00297
00298
00299 function calendarPopupAddDates() {
00300 var calEl = document.getElementById(calendarPopup_CALID);
00301
00302 el = document.createElement("div");
00303 el.setAttribute("id", calendarPopup_CALID + "-dates");
00304 el.style.position = "absolute";
00305 el.style.left = 0 + "px";
00306 el.style.top = calendarPopup_HEADER_H + calendarPopup_DATES_OFFY +
00307 calendarPopup_DATES_HDR_H + "px";
00308 el.style.width = calendarPopup_W + "px";
00309 el.style.height = calendarPopup_DATES_H + "px";
00310 el.style.paddingTop = "2px";
00311
00312 calEl.appendChild(el);
00313
00314 el = document.createElement("div");
00315 el.setAttribute("id", calendarPopup_CALID + "-datesHeader");
00316 el.style.position = "absolute";
00317 el.style.left = 0 + "px";
00318 el.style.top = calendarPopup_HEADER_H + calendarPopup_DATES_OFFY + "px";
00319 el.style.width = calendarPopup_W + "px";
00320 el.style.height = calendarPopup_DATES_HDR_H + "px";
00321 el.style.borderBottom = '1px solid #aaa';
00322
00323 calEl = calEl.appendChild(el);
00324
00325 var w = parseInt(calendarPopup_W/7);
00326 var firstMargin = parseInt((calendarPopup_W - w*7)/2);
00327 var x = 0;
00328 var day = new Date("Jun 9, 2013");
00329 for(var i=0;i<7;++i, day = new Date(day.getTime() + 1000*60*60*24))
00330 {
00331 el = document.createElement("div");
00332 el.setAttribute("class", calendarPopup_CALID + "-dayHdr");
00333 el.style.cssFloat = "left";
00334 el.style.width = w + "px";
00335 el.style.height = calendarPopup_DATES_HDR_H + "px";
00336 el.style.color = "white";
00337 el.style.textAlign = "center";
00338 if(!i) el.style.marginLeft = firstMargin + "px";
00339 el.innerHTML = day.toDateString()[0];
00340 calEl.appendChild(el);
00341 }
00342
00343 redrawDates();
00344 }
00345
00346
00347 function calendarPopupAddFooter() {
00348
00349 var calEl = document.getElementById(calendarPopup_CALID);
00350 }
00351
00352
00353 function redrawDates() {
00354 var calEl = document.getElementById(calendarPopup_CALID + "-dates");
00355 calEl.innerHTML = "";
00356
00357
00358
00359
00360 var mo = document.getElementById(calendarPopup_CALID + "-currMonth").innerHTML;
00361 var day = new Date(
00362 document.getElementById(calendarPopup_CALID + "-currYear").innerHTML,
00363 mo,1);
00364
00365 while(day.getDay()) day = new Date(day.getTime() - 1000*60*60*24);
00366
00367
00368 var w = parseInt(calendarPopup_W/7);
00369 var h = parseInt(calendarPopup_DATES_H/6);
00370 var x = 0, y = 0;
00371 var firstMargin = parseInt((calendarPopup_W - w*7)/2);
00372
00373 var todayDate = (new Date()).getDate();
00374 var todayMonth = (new Date()).getMonth();
00375 var todayYear = (new Date()).getFullYear();
00376 for(var i=0;i<7*6;++i, day = new Date(day.getTime() + 1000*60*60*24))
00377 {
00378 el = document.createElement("div");
00379 el.setAttribute("class", calendarPopup_CALID + "-day");
00380
00381 el.setAttribute("id", calendarPopup_CALID + "-day-" + parseInt(day.getTime()/(1000*60*60*24)));
00382
00383 el.style.cssFloat = "left";
00384 el.style.width = w + "px";
00385 el.style.height = h + "px";
00386 el.style.textAlign = "center";
00387 el.style.cursor = "pointer";
00388 el.style.color = mo == day.getMonth()?"white":"gray";
00389 el.style.backgroundColor = (
00390 todayYear == day.getFullYear() &&
00391 todayMonth == day.getMonth() &&
00392 todayDate == day.getDate())?"#458":"auto";
00393
00394 if(!(i%7)) el.style.marginLeft = firstMargin + "px";
00395 el.innerHTML = day.getDate();
00396
00397 el.onmouseup = selectDate;
00398
00399 calEl.appendChild(el);
00400 }
00401
00402
00403 var head = document.getElementsByTagName('head')[0];
00404 var style = document.createElement('style');
00405 var declarations = document.createTextNode("." + calendarPopup_CALID + "-day:hover { background-color: #A10 }");
00406 style.type = 'text/css';
00407 if (style.styleSheet) {
00408 style.styleSheet.cssText = declarations.nodeValue;
00409 } else {
00410 style.appendChild(declarations);
00411 }
00412
00413 head.appendChild(style);
00414 }
00415
00416
00417
00418
00419 function handleSelection() {
00420 var el = document.getElementById(calendarPopup_CALID + "-monthSelect");
00421 var newMo = el.value;
00422 el = document.getElementById(calendarPopup_CALID + "-monthYearDisplay");
00423 el.innerHTML = newMo;
00424 newMo = (new Date(newMo + " 1 2013")).getMonth();
00425 el = document.getElementById(calendarPopup_CALID + "-currMonth");
00426 el.innerHTML = newMo;
00427
00428 el = document.getElementById(calendarPopup_CALID + "-yearSelect");
00429 newMo = el.value;
00430 el = document.getElementById(calendarPopup_CALID + "-monthYearDisplay");
00431 el.innerHTML += " " + newMo;
00432 el = document.getElementById(calendarPopup_CALID + "-currYear");
00433 el.innerHTML = newMo;
00434
00435 redrawDates();
00436 }
00437
00438 function selectDate() {
00439 calendarPopup_HANDLER(parseInt(this.id.split("-")[2])+1);
00440 cancelCalendar();
00441 }
00442
00443
00444
00445
00446
00447
00448
00449
00450
00451