许久没有写过小例子的代码了，今天有个朋友让我用js帮他做一个日历。实现基本的日历功能，很可惜，本人对jquary等技术一直都不感兴趣，也因是做后台开发，很少写前台代码，但朋友相求，不得不帮，于是乎写了一个小实例，给大家分享下（因为他要的很急，时间不是很充裕，没有做代码重构及样式添加，仅仅是个小框架，勿喷）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
 // 当文档加载完成时，执行方法。
 window.ready = createCalendar;

 // 定义显示星期数组

 var weekArray = ["Sun","Mon","Tue","Web","Thu","Fri","Sat"];
 // 定义显示月份数组（程序中没有用，但可以替换）
 var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
 
 // 定义月份天数数组
 var daysOfMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
 
 // 定义两个calendar的不同标示
 var marks = ["main","bak"];
 
 // 初始化calendar
 document.ready(init());
 
 // 监听last事件
 function backMonth(){
  var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
  var yearMonthDate = calenderTime.split("-");
  var year = parseInt(yearMonthDate[0]);
  var month = parseInt(yearMonthDate[1]-2);
  
  changeCalendar(marks[0],year,month);
  changeCalendar(marks[1],year,month+1);
 } 
 

 // 监听next事件

 function nextMonth(){
  var calenderTime = document.getElementById(marks[0]+"_calenderTime").value;
  var yearMonthDate = calenderTime.split("-");
  var year = parseInt(yearMonthDate[0]);
  var month = parseInt(yearMonthDate[1]);
  
  changeCalendar(marks[0],year,month);
  changeCalendar(marks[1],year,month+1);
 }
 
 
 // 初始化calendar
 function init(){
  var time = new Date();
  createCalendar(time,true,marks[0]);
  document.writeln("===========================");
  var time2 = new Date();
  time2.setMonth(time.getMonth()+1);
  createCalendar(time2,false,marks[1]);
 }
 
 // 创建Calendar
 function createCalendar(time,flag,mark){
  var calender_rows = getMonthCalenderValue(time,mark);
  
  document.writeln("<table border=\"1\">");  
  for(var row = 0 ; row < 8 ; row ++){
   document.write("<tr>"); 
    for(var col = 0 ; col < (calender_rows[row]).length; col++){
     // 初始化各行
     if(row == 0){
      if(col!=1 && !flag){
       continue;
      }
      document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");  
      document.writeln((calender_rows[row])[col]);    
      document.writeln("</td>");
     }else if(row == 1){
       document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" >");  
      document.writeln(weekArray[col]);    
      document.writeln("</td>");
     }else{
      document.writeln("<td id=\""+(mark+"_"+row+"_"+col)+"\" onClick=\""+mark+"DateTime(this)\">");  
      document.writeln((calender_rows[row])[col]);    
      document.writeln("</td>");     
     }   
    } 
   document.writeln("</tr>");  
  }
  document.writeln("</table>");  
 }
 

 // 监听改变calendar事件

 function changeCalendar(mark,year,month){
  // 处理月份 和 年份的关系
  if(month >= 12){
   year++ ;
   month = 0 ;
  }else if(month < 0){
   year-- ;
   month = 11 ;
  }
  
  var time = new Date(year,month);
  //得到新的月份数据
  var calender_rows = getMonthCalenderValue(time,mark);
  //填充日历单元格
  fillCell(calender_rows,mark);
  //更改月视图
  document.getElementById(mark+"_calenderTime").value = year+"-"+(time.getMonth()+1);
 }
 
 // 填充日历单元格
 function fillCell(calender_rows,mark){
  for(var row = 2 ; row < 8 ; row ++){
   for(var col = 0 ; col < 7 ; col++){
    document.getElementById(mark+"_"+row+"_"+col).innerText = (calender_rows[row])[col];
   }
  }
 }
 
 // 得到calendar的所有数据
 function getMonthCalenderValue(time,mark){
  var calender_rows = new Array();
  calender_rows[0] = getFirstRowUi(time,mark);
  calender_rows[1] = weekArray;
  
  // 得到具体日期数据
  getShowMonthValues(calender_rows,time.getYear(),time.getMonth());
  
  return calender_rows;
 }
 

 //得到该月所有日期数据

 function getShowMonthValues(calender_rows,year,month){
  var monthTop = new Date(year,month);
  var currendMonthTopDay = monthTop.getDay();
  
  // 判断是否是闰年二月
  if(month == 1 && ((year%4 == 0 && year %100 != 0)||year%400==0)){
   daysOfMonth[month] = 29;
  }
  
  var days = daysOfMonth[month];
  var count = 1;
  
  var startFlag = false;
  
  // 得到填充数据
  for(var row = 2 ; row < 8 ; row ++){
   (calender_rows[row]) = ["","","","","","",""];
   for(var col = 0 ; col < 7 ; col++){
    if( !startFlag && col == currendMonthTopDay ){
     (calender_rows[row])[col] = count.toString();
     startFlag = true;
     count++;
    }else if(startFlag && count <= days){
     (calender_rows[row])[col] = count.toString();
     count++;
    }
   }
  }
 }
 
 
 
 // 得到填充第一行数据
 function getFirstRowUi(time,mark){
  var month = (time.getMonth() + 1);
  month = month < 10 ? "0"+month : month;
  var day = time.getDate();
  day = day < 10 ? "0"+day : day;
  
  var first_values = [
   "<a οnclick=\"backMonth();\">last< /a>",
   "<input type=\"text\" id=\""+mark+"_calenderTime\" value=\""+time.getYear()+"-"+month+"-"+day+"\"/>",
   "<a οnclick=\"javascript:nextMonth();\">next</a>"
  ];
  
  return first_values;
 }
 

 

 // 处理上面表格点击事件
 function mainDateTime(obj){
  var value = obj.innerText;
  value = value.length >1 ? value: "0"+value;
  // 得到table元素
  var table = obj.parentNode.parentNode.parentNode;
  // 得到input元素
  var sceneName = table.rows[0].cells[1].childNodes[0].value;
  var yearMonthDay = sceneName.split("-");  
  alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);
 }
 
 // 处理下面表格点击事件，具体步骤如上
 function bakDateTime(obj){
  var value = obj.innerText;
  value = value.length >1 ? value: "0"+value;
  var table = obj.parentNode.parentNode.parentNode;
  var sceneName = table.rows[0].cells[0].childNodes[0].value;
  var yearMonthDay = sceneName.split("-");  
  alert("current time is : "+yearMonthDay[0]+"/"+yearMonthDay[1]+"/"+value);;
 }

</script>

</head>

<body>

</body>

</html>
 

此实例中，上面的calendar是当前月的，下面的calendar是下个月的。程序中实现了last，next的功能，并处理了日期点击事件。但还有很多小bug，愿大家勿喷，只是个框架而已。

代码以共享，希望大家学习愉快。