Mod: calendar over drop down lists in IE, calendar position, past dates, layout etc.

[scythepl]

Hi,

I've found this calendar very usefull, but needed some more functionality...
Maybe someone will find my modifications usefull.

What I've done:
- modified code so calendar will be displayed on top of drop down list (and other components) in IE
- you can change the position of calendar so it won't be displayed under specified component
- past dates are avaiable
- replaced the arrow image with arrow, also added double arrow to change years
- overall change of layout, I just like it better this way...
- changed the date format that is send to input (I use yyyy-mm-dd)


My way of adding calendar to page:

standard display under field, when clicked:

<input name='aaa' id='aaa1' type="text" value="dd/mm/yy" onfocus="lcs(getElementById('aaa1'))" onclick="event.cancelBubble=true;lcs(getElementByI d('aaa1'))">

display calendar under text field when link next to it is clicked:

<input name='aaa' id='aaa' type="text" value="dd/mm/yy" >
<a onfocus="getElementById('aaa').select();lcs(getEle mentById('aaa'))" onclick="event.cancelBubble=true;getElementById('a aa').select();lcs(getElementById('aaa'))">calendar </a>

display calendar with position changed by 10px up,90 px right acording to its position under text field field when link next to it is clicked:

<input name='aaa' id='bbb' type="text" value="dd/mm/yy" >
<a onfocus="lcs(getElementById('bbb'),10,90)" onclick="event.cancelBubble=true;lcs(getElementByI d('bbb'),10,90)">calendar</a>

(sorry for my english.. just paste this code into html file and see results ;) )



And here is a full code:

//---------------------------------------------------------------------------------------------------------------------


/* --- Swazz Javascript Calendar ---
/* --- v 1.0 3rd November 2006
By Oliver Bryant
http://calendar.swazz.org
modified by Szymon Kosno skosno@gmail.com */

function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}

function checkClick(e) {
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (getObj('fc'))
if (!isChild(CSE,getObj('fc'))){
getObj('fc').style.display='none';
getObj('fc2').style.display='none';
}
}

function isChild(s,d) {
while(s) {
if (s==d)
return true;
s=s.parentNode;
}
return false;
}

function Left(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function Top(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

document.write("");
document.write("<iframe id = 'fc2' src = 'javascript:null;' scrolling = 'no' frameBorder = 0 style='width:155px;height:118px;border:0;padding:0 ;display:none;position:absolute;zIndex:5000'></iframe>");
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellspacing=0>');
document.write('<tr style="font-size:11px;height:10px; background:#EBEBEB;font-weight:bold"><td style="cursor:pointer" onclick="csuby()">«</td><td style="cursor:pointer" onclick="csubm()"><</td><td colspan=3 id="mns" align="center"></td><td align="right" style="cursor:pointer" onclick="caddm()">></td><td align="right" style="cursor:pointer" onclick="caddy()">»</td></tr>');
document.write('<tr style="font-size:10px;height:8px;text-align:center;font-weight:bold;"><td style="color:red">S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>');
document.write('<tr><td colspan="7" style="border-bottom:1px solid #ABABAB"></td></tr>');
for(var kk=1;kk<=6;kk++) {
document.write('<tr style="height:8px">');
for(var tt=1;tt<=7;tt++) {
num=7 * (kk-1) - (-tt);
document.write('<td id="v' + num + '" style="font-size: 9px;width:20px;text-align:center"> </td>');
}
document.write('</tr>');
}
document.write('</table>');

document.all?document.attachEvent('onclick',checkC lick):document.addEventListener('click',checkClick ,false);


// Calendar script
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();

var updobj;
function lcs(ielem,y,x) {
updobj=ielem;
if(x==null) x=0;
if(y==null) y=0;
getObj('fc2').style.left=Left(ielem)+x;
getObj('fc2').style.top=Top(ielem)+ielem.offsetHei ght-y;
getObj('fc2').style.display='block';

getObj('fc').style.left=Left(ielem)+x;
getObj('fc').style.top=Top(ielem)+ielem.offsetHeig ht-y;
getObj('fc').style.display='';

// First check date is valid
curdt=ielem.value;
curdtarr=curdt.split('-');
isdt=true;
for(var k=0;k<curdtarr.length;k++) {
if (isNaN(curdtarr[k]))
isdt=false;
}
if (isdt&(curdtarr.length==3)) {
ccm=curdtarr[1]-1;
ccy=curdtarr[0];
prepcalendar(curdtarr[2],curdtarr[1]-1,curdtarr[0]);
}

}

function evtTgt(e)
{
var el;
if(e.target)el=e.target;
else if(e.srcElement)el=e.srcElement;
if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
return el;
}
function EvtObj(e){if(!e)e=window.event;return e;}
function cs_over(e) {
evtTgt(EvtObj(e)).style.background='#FFCC66';
}
function cs_out(e) {
evtTgt(EvtObj(e)).style.background='#FFFFFF';
}
function cs_click(e) {
updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)) .id.length)];
getObj('fc2').style.display='none';
getObj('fc').style.display='none';

}

var mn=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','A UG','SEP','OCT','NOV','DEC');
var mnn=new Array('31','28','31','30','31','30','31','31','30' ,'31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30' ,'31','30','31');
var calvalarr=new Array(42);

function f_cps(obj) {
obj.style.background='#FFFFFF';
obj.style.color='#000000';
obj.style.cursor='pointer';
}

function f_cpps(obj) {
obj.style.background='#FFFFFF';
obj.style.color='#ff1111';
obj.style.cursor='default';
}

function f_hds(obj) {
obj.style.background='#FFF799';
obj.style.color='#000000';
obj.style.cursor='pointer';
}

// day selected
function prepcalendar(hd,cm,cy) {
now=new Date();
sd=now.getDate();
td=new Date();
td.setDate(1);
td.setFullYear(cy);
td.setMonth(cm);
cd=td.getDay();
getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
marr=((cy%4)==0)?mnl:mnn;
for(var d=1;d<=42;d++) {
f_cps(getObj('v'+parseInt(d)));
if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
dip=((d-cd == sd)&&(cm==sccm)&&(cy==sccy));
htd=((hd!='')&&(d-cd==hd));
if (dip)
f_cpps(getObj('v'+parseInt(d)));
else if (htd)
f_hds(getObj('v'+parseInt(d)));
else
f_cps(getObj('v'+parseInt(d)));

getObj('v'+parseInt(d)).onmouseover=(0)?null:cs_ov er;
getObj('v'+parseInt(d)).onmouseout=(0)?null:cs_out ;
getObj('v'+parseInt(d)).onclick=(0)?null:cs_click;

getObj('v'+parseInt(d)).innerHTML=d-cd;
calvalarr[d]=''+ccy+'-'+((cm<10)?'0':'')+(cm-(-1))+'-'+((d<10)?'0':'')+(d-cd);
}
else {
getObj('v'+d).innerHTML=' ';
getObj('v'+parseInt(d)).onmouseover=null;
getObj('v'+parseInt(d)).onmouseout=null;
getObj('v'+parseInt(d)).style.cursor='default';
}
}
}

prepcalendar('',ccm,ccy);

function caddm() {
marr=((ccy%4)==0)?mnl:mnn;

ccm+=1;
if (ccm>=12) {
ccm=0;
ccy++;
}
cdayf();
prepcalendar('',ccm,ccy);
}

function caddy() {
marr=((ccy%4)==0)?mnl:mnn;
ccy++;
prepcalendar('',ccm,ccy);
}

function csubm() {
marr=((ccy%4)==0)?mnl:mnn;

ccm-=1;
if (ccm<0) {
ccm=11;
ccy--;
}
cdayf();
prepcalendar('',ccm,ccy);
}

function csuby() {
marr=((ccy%4)==0)?mnl:mnn;

ccy--;
prepcalendar('',ccm,ccy);
}

function cdayf() {
}



//---------------------------------------------------------------------------------------------------------------------

[open2g]

http://www.chinese-antiquefurniture.com
http://www.chinese-antiquefurniture.com/Bed.html
http://www.chinese-antiquefurniture.com/Bench.html
http://www.chinese-antiquefurniture.com/Box.html
http://www.chinese-antiquefurniture.com/Cabinet.html
http://www.chinese-antiquefurniture.com/Carving.html
http://www.chinese-antiquefurniture....porcelain.html
http://www.chinese-antiquefurniture.com/Chair.html
http://www.chinese-antiquefurniture.com/Dresser.html
http://www.chinese-antiquefurniture.com/Etagere.html
http://www.chinese-antiquefurniture....iture-set.html
http://www.chinese-antiquefurniture....ellaneous.html
http://www.chinese-antiquefurniture.com/Screen.html
http://www.chinese-antiquefurniture.com/Table-desk.html
http://www.chinese-antiquefurniture.com/Window.html