Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;width:1105px;height:510px;background-Color:#FFFFCC;border:solid black 1px;
}
/* the Calendar Months*/
.month {
left:5px;width:80px;color:red;background-Color:#FFFFCC;border:solid black 1px;text-Align:center;
}
/* the Calendar Row*/
.calendarrow {
left:100px;top:5px;width:180px;color:red;background-Color:#FFFFCC;border:solid red 1px;margin-Bottom:5px;
}
/* the Calendar Day Name Row */
.caldayrow {
background-Color:#663300;color:#FFCC33;font-Size:12px;text-Align:center;
}
/* the Calendar Day Fields */
.caldays {
height:20px;background-Color:#CCFFFF;color:#000099;font-Size:12px;text-Align:center;
}
/* the Calendar Day Fields MouseOver Style*/
.caldaysover {
height:20px;background-Color:#FFFFCC;color:red;font-Size:12px;text-Align:center;
}
/*]]>*/
</style>
</head>
<body>
<input type="button" value="Year +ve" onmouseup="zxcYearCalendar.Year('tst',1);" />
<input type="button" value="Year -ve" onmouseup="zxcYearCalendar.Year('tst',-1);" />
<input type="button" value="GoTo 2013" onmouseup="zxcYearCalendar.GoToYear('tst',2013);" />
<div id="tstyear" ></div>
<div id="tst"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/
// Year Calendar (27-June-2013) DRAFT
// by Viv Phillips - http://www.vicsjavascripts.org.uk/
var zxcYearCalendar={
Year:function(id,ud){
var o=zxcYearCalendar['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
o?this.year(o,o.y+ud):null;
},
GoToYear:function(id,y){
var o=zxcYearCalendar['zxc'+id],y=typeof(y)=='number'&&y>1970?y:false;
y&&o?this.year(o,y):null;
},
init:function(o){
var id=o.DaysID,p=document.getElementById(id),f=o.Format,z0=0;
o.p=p;
o.ary=[];
o.f=typeof(f)=='string'&&f.charAt(0).toUpperCase()=='D'?1:0;
o.over=typeof(o.MouseOver)=='function'?o.OnClick:false;
for (var z0=0;z0<12;z0++){
o.ary[z0]=[];
this.make(o,z0);
}
zxcYearCalendar['zxc'+id]=o;
this.year(o,new Date().getFullYear());
},
year:function(o,y){
o.y=y;
for (var z0=0;z0<12;z0++){
this.dates(o,o.y,z0);
}
typeof(o.OnYear)=='function'?o.OnYear(o.y):null;
},
dates:function(o,cy,cm){
var fday=new Date(cy,cm,1).getDay()-o.f;
fday=fday<0?7+fday:fday;
var ldate=new Date(cy,cm+1,1,-1).getDate(),d,z0=0;
for (var z0=0;z0<o.ary[cm].length;z0++){
d=z0>=fday&&z0<fday+ldate?z0-fday+1:'';
o.ary[cm][z0][1]=d?[cy,cm+1,z0-fday+1]:'';
o.ary[cm][z0][0].innerHTML=d&&d<10?'0'+d:d;
}
},
make:function(o,nu){
var r=document.createElement('DIV'),nme=r.cloneNode(false),days=r.cloneNode(false),m=r.cloneNode(false),dsz=o.DayWidth,dn,d,sz=37,z0=o.f;
r.style.position='relative';
r.className=o.RowClass;
o.p.appendChild(r);
days.style.position=nme.style.position='relative';
r.appendChild(nme);
r.appendChild(days);
for (;z0<=sz;z0++){
dn=r.cloneNode(false);
dn.style.position='absolute';
dn.style.left=(dsz)*(z0-o.f)+'px';
dn.style.width=dsz+'px';
dn.innerHTML=o.Days[z0%7];
dn.className=o.DayNameClass;
nme.appendChild(dn);
d=dn.cloneNode(false);
d.className=o.DayClass;
d.innerHTML=z0;
days.appendChild(d);
d=[d];
typeof(o.OnClick)=='function'?this.addevt(d[0],'click','click',o,d):null;
typeof(o.MouseOver)=='function'?this.addevt(d[0],'mouseover','over',o,d):false;
typeof(o.MouseOut)=='function'?this.addevt(d[0],'mouseout','out',o,d):false;
o.ary[nu].push(d);
}
r.style.width=dsz*sz+(o.f==0?dsz:0)+'px';
days.style.width=nme.style.width=r.style.width;
nme.style.height=dn.offsetHeight+'px';
days.style.height=d[0].offsetHeight+'px';
m.style.position='absolute';
m.className=o.MonthClass;
m.style.top=r.offsetTop+'px';
m.innerHTML=o.Months[nu];
o.p.appendChild(m);
},
click:function(o,a){
o.OnClick(a);
},
over:function(o,a){
a[1]?o.MouseOver(a):null;
},
out:function(o,a){
a[1]?o.MouseOut(a):null;
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
}
zxcYearCalendar.init({
DaysID:'tst',
Months:['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
Days:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
Format:'mm/dd/yyyy', // 'mm/dd/yyyy' or 'dd/mm/yyyy'.
DayWidth:26,
MonthClass:'month',
RowClass:'calendarrow',
DayNameClass:'caldayrow',
DayClass:'caldays',
OnClick:function(date){
document.Show.Show0.value=date;
},
MouseOver:function(date){
date[0].className='caldaysover';
},
MouseOut:function(date){
date[0].className='caldays';
},
OnYear:function(y){
document.getElementById('tstyear').innerHTML=y
}
})
/*]]>*/
</script>
</body>
</html>
Year-view calendar
Bookmarks