<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "doctype/xhtml11.dtd">
<html>
<head>
<title>JS mini calendar</title>

<script type="text/javascript">
function objGet(x,doc)	{var d=(doc)?doc:document; return (d.getElementById?d.getElementById(x):d.all?d.all[x]:d.layers?d.layers[x]:null);}
function selV(x)	{return x[x.selectedIndex].value;}

function obj_calendar(xName,xFrom,xTo)
{
	this.days     = "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
	this.months   = "January,February,March,April,May,June,July,August,September,October,November,December".split(",");
	this.nameCal  = xName;
	this.objCal   = xFrom;
	this.objTo    = xTo;
	this.writeDate= function(y,m,d)	{this.objTo.value = y+"-"+(m*1+1)+"-"+d; this.close();}
	this.readDate = function() {var a,d; a = this.objTo.value; if (a.length>7) {a = a.split('-'); d = new Date(a[0]*1,a[1]*1-1,a[2]); if (d) {return d;}}; return new Date();}
	this.open     = calWrite;
	this.close    = function()  {this.objCal.innerHTML = "";}
}


function calWrite(date)
{
var a,d,d0,d2,m,m0,m1,m2,x,y,y2,w,w0, i,j,days1,days2,s1,s2,dateT,l, cal_arr;
a  = this.nameCal;
if (date==null)	{date = this.readDate();}
dateT = new Date();
d2 = dateT.getDate();
m2 = dateT.getMonth();
y2 = dateT.getFullYear();
d  = date.getDate();
m  = date.getMonth();
y  = date.getFullYear();
x  = ((y2-y)==0 && (m2-m)==0) ? 1 : 0;
m0 = new Date(y,m,  1);
m1 = new Date(y,m+1,1);
w0 = m0.getDay();
days1 = Math.round((m1.getTime()-m0.getTime())/86400000);	//1000*60*60*24

 s1 = "\n<select onchange=\""+a+".open(new Date(selV(this.form."+a+"year),selV(this),1))\" name=\""+a+"month\">";
for(i=0;i<12;i++)
{s1+= "\n<option value=\""+i+"\""+((i==m)?" selected=\"selected\"":"")+">"+this.months[i]+"<\/option>";}
 s1+= "\n<\/select>";
 s2 = "\n<select onchange=\""+a+".open(new Date(selV(this),selV(this.form."+a+"month),1))\" name=\""+a+"year\">";
for(i=y-2;i<y+3;i++)
{s2+= "\n<option value=\""+i+"\""+((i==y)?" selected=\"selected\"":"")+">"+i+"<\/option>";}
 s2+= "\n<\/select>";

days2 = '';
for (i=0;i<7;i++)	//nazvy dnu
	{
	j = this.days[i];
	j = (i==0 || i==6) ? "<font color=\"#ff0000\">"+j+"<\/font>" : j;
	days2+= "<th>"+j+"<\/th>";
	}

l = Math.ceil((w0+days1)/7)*7;
cal_arr = new Array(l);
w = w0;
w0-=1;
for (i=1;i<=days1;i++)
	{
	w = w%7;
	j = (x && i==d2) ? "<u>"+i+"<\/u>" : i;	//today
	j = (i==d) ? "<b>"+j+"<\/b>" : j;	//selected
	j = (w==0 || w==6) ? "<font color=\"#ff0000\">"+j+"<\/font>" : j;	//week
	cal_arr[i+w0] = "\n<td onclick=\""+a+".writeDate("+y+","+m+","+i+")\">"+j+"<\/td>";	//Y-m-d
	w++;
	}
cal = "<p class=\"cal\">";
cal+= "\n<span onclick=\""+a+".close()\">[x]<\/span>";
cal+= "\n"+s1+s2;
cal+= "\n<table border=\"1\">";
cal+= "\n<thead><tr>"+days2+"<\/tr><\/thead>";
cal+= "\n<tbody align=\"right\"><tr>";
for (i=0,j=0;i<l;i++,j++)
	{
	if (j>6) {j = 0; cal+= "<\/tr><tr>";}
	cal+= (cal_arr[i]==null) ? "<td>&nbsp;<\/td>" : cal_arr[i];
	}
cal+= "<\/tr><\/tbody>\n<\/table>";
cal+= "\n<\/p>";

this.objCal.innerHTML = cal;
}
</script>
</head>



<body>
<form action="#" name="fcalendar">
<input type="text" name="date1" class="text"/><input type="button" value="cal1" onclick="cal1.open()" class="butt"/>
<div id="cal1a"></div>
<input type="text" name="date2" class="text"/><input type="button" value="cal2" onclick="cal2.open()" class="butt"/>

<div id="cal2a"></div>
</form>

<script type="text/javascript">
var cal1 = new obj_calendar('cal1',objGet('cal1a'),document.fcalendar.date1);
var cal2 = new obj_calendar('cal2',objGet('cal2a'),document.fcalendar.date2);
</script>

<script type="text/javascript" src="view-source.js"></script>
</body>
</html>
