Full version: jsB@nk » Time » Calendar » PopCalendar 3.30 script
URL: https://www.javascriptbank.com/popcalendar-33-script.html
The most attractive date picker you may find in the JavaScript world.
Full version: jsB@nk » Time » Calendar » PopCalendar 3.30 script
URL: https://www.javascriptbank.com/popcalendar-33-script.html
<SCRIPT language=javascript><!-- Begin //place these scripts within BODY tag if you are using IE 4.0 or below.//****************************************************************************// PopCalendar 3.30, Emailware(please mail&commend me if u like it)// Originally coded by Liming(Victor) Weng, email: [email protected]// Release date: 2000.3.7// Anyone may modify it to satify his needs, but please leave this comment ahead.//****************************************************************************var gdCtrl = new Object();var goSelectTag = new Array();var gcGray = "#808080";var gcToggle = "#ffff00";var gcBG = "#cccccc";var gdCurDate = new Date();var giYear = gdCurDate.getFullYear();var giMonth = gdCurDate.getMonth()+1;var giDay = gdCurDate.getDate();function fSetDate(iYear, iMonth, iDay){ VicPopCal.style.visibility = "hidden"; gdCtrl.value = iMonth+"-"+iDay+"-"+iYear; //Here, you could modify the locale as you need !!!! for (i in goSelectTag) goSelectTag[i].style.visibility = "visible"; goSelectTag.length = 0;}function fSetSelected(aCell){ var iOffset = 0; var iYear = parseInt(tbSelYear.value); var iMonth = parseInt(tbSelMonth.value); self.event.cancelBubble = true; aCell.bgColor = gcBG; with (aCell.children["cellText"]){ var iDay = parseInt(innerText); if (color==gcGray)iOffset = (Victor<10)?-1:1;iMonth += iOffset;if (iMonth<1) {iYear--;iMonth = 12;}else if (iMonth>12){iYear++;iMonth = 1;} } fSetDate(iYear, iMonth, iDay);}function Point(iX, iY){this.x = iX;this.y = iY;}function fBuildCal(iYear, iMonth) { var aMonth=new Array(); for(i=1;i<7;i++) aMonth[i]=new Array(i); var dCalDate=new Date(iYear, iMonth-1, 1); var iDayOfFirst=dCalDate.getDay(); var iDaysInMonth=new Date(iYear, iMonth, 0).getDate(); var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1; var iDate = 1; var iNext = 1; for (d = 0; d < 7; d++)aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++; for (w = 2; w < 7; w++) for (d = 0; d < 7; d++)aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++); return aMonth;}function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize) { var WeekDay = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat"); var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold "+iDateTextSize+" Courier;"; //Coded by Liming Weng(Victor Won) email:[email protected] with (document) {write("<tr>");for(i=0; i<7; i++)write("<td "+styleTD+"color:#990099' >" + WeekDay[i] + "</td>");write("</tr>"); for (w = 1; w < 7; w++) {write("<tr>");for (d = 0; d < 7; d++) {write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");write("<font id=cellText Victor='Liming Weng'> </font>");write("</td>")}write("</tr>");} }}function fUpdateCal(iYear, iMonth) { myMonth = fBuildCal(iYear, iMonth); var i = 0; for (w = 0; w < 6; w++)for (d = 0; d < 7; d++)with (cellText[(7*w)+d]) {Victor = i++;if (myMonth[w+1][d]<0) {color = gcGray;innerText = -myMonth[w+1][d];}else{color = ((d==0)||(d==6))?"red":"black";innerText = myMonth[w+1][d];}}}function fSetYearMon(iYear, iMon){ tbSelMonth.options[iMon-1].selected = true; for (i = 0; i < tbSelYear.length; i++)if (tbSelYear.options[i].value == iYear)tbSelYear.options[i].selected = true; fUpdateCal(iYear, iMon);}function fPrevMonth(){ var iMon = tbSelMonth.value; var iYear = tbSelYear.value; if (--iMon<1) { iMon = 12; iYear--; } fSetYearMon(iYear, iMon);}function fNextMonth(){ var iMon = tbSelMonth.value; var iYear = tbSelYear.value; if (++iMon>12) { iMon = 1; iYear++; } fSetYearMon(iYear, iMon);}function fToggleTags(){ with (document.all.tags("SELECT")){ for (i=0; i<length; i++) if ((item(i).Victor!="Won")&&fTagInBound(item(i))){ item(i).style.visibility = "hidden"; goSelectTag[goSelectTag.length] = item(i); } }}function fTagInBound(aTag){ with (VicPopCal.style){ var l = parseInt(left); var t = parseInt(top); var r = l+parseInt(width); var b = t+parseInt(height);var ptLT = fGetXY(aTag);return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t)); }}function fGetXY(aTag){ var oTmp = aTag; var pt = new Point(0,0); do { pt.x += oTmp.offsetLeft; pt.y += oTmp.offsetTop; oTmp = oTmp.offsetParent; } while(oTmp.tagName!="BODY"); return pt;}// Main: popCtrl is the widget beyond which you want this calendar to appear;// dateCtrl is the widget into which you want to put the selected date.// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">function fPopCalendar(popCtrl, dateCtrl){ gdCtrl = dateCtrl; fSetYearMon(giYear, giMonth); var point = fGetXY(popCtrl); with (VicPopCal.style) { left = point.x;top = point.y+popCtrl.offsetHeight+1;width = VicPopCal.offsetWidth;height = VicPopCal.offsetHeight;fToggleTags(point);visibility = 'visible'; } VicPopCal.focus();}function fHideCal(){ var oE = window.event; if ((oE.clientX>0)&&(oE.clientY>0)&&(oE.clientX<document.body.clientWidth)&&(oE.clientY<document.body.clientHeight)) {var oTmp = document.elementFromPoint(oE.clientX,oE.clientY);while ((oTmp.tagName!="BODY") && (oTmp.id!="VicPopCal"))oTmp = oTmp.offsetParent;if (oTmp.id=="VicPopCal")return; } VicPopCal.style.visibility = 'hidden'; for (i in goSelectTag)goSelectTag[i].style.visibility = "visible"; goSelectTag.length = 0;}var gMonths = new Array("January","February","March","April","May","June","July","August","September","October","November","December");with (document) {write("<Div id='VicPopCal' onblur='fHideCal()' onclick='focus()' style='POSITION:absolute;visibility:hidden;border:2px ridge;width:10;z-index:100;'>");write("<table border='0' bgcolor='#6699cc'>");write("<TR>");write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:16 Fixedsys' onClick='fPrevMonth()' onblur='fHideCal()'>");write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won' onclick='self.event.cancelBubble=true' onblur='fHideCal()'>");for (i=0; i<12; i++)write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");write("</SELECT>");write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won' onclick='self.event.cancelBubble=true' onblur='fHideCal()'>");for(i=1990;i<2015;i++)write("<OPTION value='"+i+"'> "+i+" </OPTION>");write("</SELECT>");write(" <input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:16 Fixedsys' onclick='fNextMonth()' onblur='fHideCal()'>");write("</td>");write("</TR><TR>");write("<td align='center'>");write("<DIV style='background-color:teal;'><table width='100%' border='0'>");fDrawCal(giYear, giMonth, 18, 16);write("</table></DIV>");write("</td>");write("</TR><TR><TD align='center'>");write("<B style='cursor:hand' onclick='fSetDate(giYear,giMonth,giDay); self.event.cancelBubble=true' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>Today: "+gMonths[giMonth-1]+" "+giDay+", "+giYear+"</B>");write("</TD></TR>");write("</TD></TR>");write("</TABLE></Div>");}// End -- Coded by Liming Weng, email: [email protected] --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE align=center> <TBODY> <TR> <TD align=middle> <H1> </H1><BR>PopCalendar 3.30</TD></TR> <TR> <TD align=middle> <INPUT name=dc readOnly style="TEXT-ALIGN: center" size="20"> <INPUT onclick="fPopCalendar(dc,dc); return false" type=button value=V> </TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->