<html>
<style type='text/css'>
.cal {border-collapse:collapse}
.cal TH {background:green;
border:solid 1px green;
text-align:center
}
.cal TD {border:solid 1px green;
text-align:right
}
.cal COL {background:pink}
</style>
<div id=calendar></div>
<script type='text/javascript'>
function drawCal(inc)
{
month+=inc;
if(month == 0 )
{
month=12;
year--;
}
else if( month == 13 )
{
month=1;
year++;
}
calendar(year, month);
}
function calendar(yr, mth)
{
var td=new Date();
var today=new Date( td.getFullYear(), td.getMonth(), td.getDate());
var s='<table class=cal><col>';
s+='<tr><th onclick="drawCal(-1)"><<<th colspan=5>'
+yr +'.'+ mth +'<th onclick="drawCal(1)">>>';
mth--;
s+='<tr><th>S<th>M<th>T<th>W<th>T<th>F<th>S';
var dt=new Date(yr, mth, 1);
var wd=dt.getDay(); //week day
var i;
s+='<tr>';
for( ; wd > 0 ; wd--) s+='<td>';
for( i=1; i<32; )
{
dt=new Date(yr, mth, i);
if( dt.toString() == today.toString() )
s+='<td style="color:blue; font-weight:bolder">'+i;
else
s+='<td>'+i;
dt=new Date(yr, mth, ++i);
if( dt.getMonth() != mth ) break;
wd=dt.getDay();
if( wd == 0 )
s+='<tr>';
}
for( ; wd < 6; wd++) s+='<td>';
s+='</table>';
document.getElementById('calendar').innerHTML=s;
}
var td=new Date();
var year=td.getFullYear();
var month=td.getMonth()+1;
calendar(year, month);
</script>
</html>
沒有留言:
張貼留言