javascriptカレンダー
10368 ワード
1.コード
<!doctype html>
<head>
<title> </title>
<meta charset="utf-8"/>
<style type="text/css">
#calendar1 a{
float:left;
width:30px;
}
#calendar{
background:none repeat scroll 0 0 #E0ECF9;
width: 210px;
border: 1px solid #479AC7;
position:absolute;
left:300px;
}
#calendar .week{
background:none repeat scroll 0 0 #D5F3F4;
float:left;
color:#808080;
}
#calendar .week a{
cursor: auto;
}
#calendar a{
float:left;
width:30px;
display:block;
height:25px; /* a */
line-height:25px;
text-align: center;
cursor: pointer;
}
#calendar .head a{
background: none repeat scroll 0 0 #479AC7;
}
#calendar .weekEnd{
color:red;
}
#calendar a.day:hover {
background-color:#D5F3F4
}
</style>
</head>
<body>
<div id="calendar1" style="background:none repeat scroll 0 0 #E0ECF9;width: 210px;border: 1px solid #479AC7;position:absolute;">
<span style="background:none repeat scroll 0 0 #479AC7;float:left;"><a> </a><a> </a><a> </a><a> </a><a> </a><a> </a><a> </a></span>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
</div>
</body>2 js処理
<script type="text/javascript">
/*
* function
* html body
* 1 logStr
* 2 id
*/
function writeData( logStr ,id ){
if(logStr==null || logStr=='' ) return ;
var logObjId= id==null? "":id ;
var logObj = document.getElementById(logObjId);
//
logObj = logObj||document.getElementsByTagName('body')[0];
logObj.innerHTML = logObj.innerHTML + " "+logStr ;
}
// 42 ，
var getArray = function( date ){
if(!date) return ;
var dates = new Array(42);
var year = date.getFullYear();
var month = date.getMonth();
var dateFirst = new Date(year,month,1 ).getDay(); //
var dateLast = new Date(year,month+1,0 ).getDate(); // 0
for(var i=1;i<=dateLast ;i++ ){
//dates[i] = new Date( year,month,i ).toLocaleString();
dates[dateFirst+i-1] = year+"-"+month+"-"+i
}
return dates;
}
//
var createOutline = function(){
var outLine = document.createElement('div');
outLine.setAttribute('id','calendar');
var body = document.getElementsByTagName('body')[0];
body.appendChild( outLine );
return outLine;
}
//
var getMonthZW = function(data){
var zw =null ;
switch (data)
{
case 1 :
zw = ' '; break;
case 2 :
zw = ' '; break;
case 3 :
zw = ' '; break;
case 4 :
zw = ' '; break;
case 5 :
zw = ' '; break;
case 6 :
zw = ' '; break;
case 7 :
zw = ' '; break;
case 8 :
zw = ' '; break;
case 9 :
zw = ' '; break;
case 10 :
zw = ' '; break;
case 11 :
zw = ' '; break;
case 12 :
zw = ' '; break;
}
return zw;
}
//
var createHead = function(outLine ,currentDate,aTemplate ){
var head = document.createElement('span');
outLine.appendChild( head );
head.className = 'head';
//
var yearLeftNode = aTemplate.cloneNode();
yearLeftNode.innerHTML = "<<";
head.appendChild( yearLeftNode );
yearLeftNode.style.width='30px';
yearLeftNode.onclick = (function(date){
return function(){
drawCalendar( preYear(date));
}
})(currentDate);
//
var monthLeftNode = aTemplate.cloneNode();
monthLeftNode.innerHTML = "<";
head.appendChild( monthLeftNode );
monthLeftNode.style.width='30px';
monthLeftNode.onclick = (function(date){
return function(){
drawCalendar(preMonth(date) );
}
})(currentDate);
//addMonthAndYear(head,aTemplate,"<", preMonth(date) ) ;
//
var monthNode = aTemplate.cloneNode();
monthNode.innerHTML= getMonthZW( currentDate.getMonth()+1 );
head.appendChild( monthNode );
monthNode.style.width='40px';
//
var yearNode = aTemplate.cloneNode();
yearNode.innerHTML = currentDate.getFullYear() +' ';
head.appendChild( yearNode );
yearNode.style.width='50px';
//
var monthRightNode = aTemplate.cloneNode();
monthRightNode.innerHTML = ">";
head.appendChild( monthRightNode );
monthRightNode.style.width='30px';
monthRightNode.onclick = (function(date){
return function(){
drawCalendar(nextMonth(date) );
}
})(currentDate);
//
var yearRightNode = aTemplate.cloneNode();
yearRightNode.innerHTML = ">>";
head.appendChild( yearRightNode );
yearRightNode.style.width='30px';
yearRightNode.onclick = (function(date){
return function(){
drawCalendar(nextYear(date) );
}
})(currentDate);
}
// ， date
//
function addMonthAndYear(head,aTemplate,btnHtml, goToDate ){
var node = aTemplate.cloneNode();
node.innerHTML = ">";
head.appendChild( node );
node.style.width='30px';
node.onclick = (function(date){
return function(){
drawCalendar(date);
}
})(goToDate);
}
//
function nextYear(date){
return new Date(date.getFullYear()+1,date.getMonth(),date.getDate() );
}
// 0-11
function nextMonth(date){
var month = date.getMonth()+1;
var year = date.getFullYear();
if( month >11){
month = 0;
year++ ;
}
return new Date( year , month,date.getDate() );
}
//
function preYear(date){
return new Date(date.getFullYear()-1,date.getMonth(),date.getDate() );
}
// 0-11
function preMonth(date){
var month = date.getMonth()-1;
var year = date.getFullYear();
if( month<0){
month = 12;
year-- ;
}
return new Date( year , month,date.getDate() );
}
//
var createWeek = function( outLine,a ){
var weeks = " ".split('');
var week = document.createElement('span'); //
week.className = 'week';
for(var i=0;i<weeks.length;i++ ){
var aNew = a.cloneNode();
aNew.innerHTML= weeks[i] ;
week.appendChild(aNew );
}
outLine.appendChild(week);
return week;
}
//
var createDay= function(outLine,dates,aTemplate){
if(!dates) return ;
for(var i=0;i<dates.length;i++ ){
var aNew = aTemplate.cloneNode(); //
if(dates[i] && dates[i]!='undefine'){
aNew.innerHTML=dates[i].split('-')[2] ; //
aNew.className = 'day'; // hover
if( i%7==0 || i%7==6 ) aNew.className='weekEnd';
//
aNew.onclick=(function(d){
return function(){
//
alert( d);
}
})( dates[i] );
}
outLine.appendChild(aNew );
}
}
//
var drawCalendar = function(date){
//
var arrs = getArray(date);
var outLine = createOutline();//
var aTemplate = document.createElement('a'); //
createHead(outLine, date ,aTemplate);//
createWeek(outLine,aTemplate ); //
createDay(outLine,arrs, aTemplate ); //
}
var date = new Date();
drawCalendar(date );
</script>