记录：动态日历生成

<p style="line-height:40px;">
	<td align="right" >年份：</td>
	<td><select name="setYear" id="setYear" size="1" style="width:110px;height:30px" onChange="selectDate()">
		<option value="0">请选择年份</option>
		#foreach($year in [2010..2049])
			<option value="$!{year}">$!{year}</option>
		#end
	    </select>
	</td><td align="right" >年</td>
		
	<td align="right" >月份：</td>
	<td><select name="setMonth" id="setMonth" size="1" style="width:110px;height:30px" onChange="selectDate()">
		<option value="0">请选择月份</option>
		#foreach($month in [1..12])
			<option value="$!{month}">$!{month}</option>
		#end
	    </select>
	</td><td align="right" >月</td>
	     <td><font size="1.5" color="red">红色 </font><font size="1.5">: 周末    </font><font size="1.5" color="blue">蓝色 </font><font size="1.5">: 法定节假日（含周末）</font></td>
</p>
	
<div id="cc">
	
</div>

<script language="javascript">
	function is_leap(year) {
		   return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
		} //是否为闰年
		
		 
	function NewDate(str) { 
		str = str.split('-'); 
		var date = new Date(); 
		date.setUTCFullYear(str[0], str[1] - 1, str[2]); 
		date.setUTCHours(0, 0, 0, 0); 
		return date; 
	}//各版本浏览器兼容Date转换 		
		
		
		//var nstr= new Date('$!{dateStr}'); //当前Date资讯
		var nstr= NewDate('$!{dateStr}');
		var ynow=nstr.getFullYear(); //年份
		var mnow=nstr.getMonth(); //月份
		var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯
		var firstday=n1str.getDay(); //当月第一天星期几
		var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数
		var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数		

		document.getElementById("setYear").value = ynow;
		document.getElementById("setMonth").value = mnow+1;

		//打印表格第一行（有星期标志）
		var html = "<table id='c' border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>";
		for(i=0;i<tr_str;i++) { 
		   html = html + "<tr>";//表格的行
		   for(k=0;k<7;k++) { //表格每行的单元格
		      idx=i*7+k; //单元格自然序列号
		      date_str=idx-firstday+1; //计算日期
		      (date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）
		      param = isWorkday(ynow,mnow+1,date_str);		      
		      if(param == 1)//判断是否为工作日并初始化日期
		      {
		      	//document.write ("<td align='center'>" + date_str + "</td>");
		      	html = html + "<td align='center'>" + date_str + "</td>";
		      }
		      if(param == 0)
		      {
		      	//document.write ("<td align='center' style='background-color:red;'>" + date_str + "</td>");
		      	html = html + "<td align='center' style='background-color:red;'>" + date_str + "</td>";
		      }
		      if(param == 2)
		      {
		      	//document.write ("<td align='center' style='background-color:red;'>" + date_str + "</td>");
		      	html = html + "<td align='center' style='background-color:blue;'>" + date_str + "</td>";
		      }
		      if(param == -1)
		      {
		      	//document.write ("<td align='center'>" + date_str + "</td>");
		      	html = html + "<td align='center'>" + date_str + "</td>";
		      }
		      
		   }
		   html = html + "</tr>";//表格的行结束
		}
		html = html + "</table>";//表格结束
		jQuery("#cc").html(html);
		changeStatus(firstday,ynow,mnow);
        
        function changeStatus(first,year,month){
            var trs = document.getElementById('c').getElementsByTagName('td');

            for (var i = 0; i < trs.length; i++) {
            	if((i-first+1-7) > 0 && (i-first+1-7) <= m_days[month])
            	{
                	trs[i].onclick = function () {
                    	if(this.style.backgroundColor == 'red')
                    	{
                    		updateday(year,month+1,this.innerText,2);
                    		this.style.backgroundColor = 'blue';
                    	}
                    	else if(this.style.backgroundColor == 'blue')
                    	{
                    		updateday(year,month+1,this.innerText,1);
                    		this.style.backgroundColor = '';
                    	}
	                    else
	                    {
	                    	updateday(year,month+1,this.innerText,0);
	                    	this.style.backgroundColor = 'red';
	                    }
	                }
                }
            }
        }
        
        function updateday(year,month,date,status){
			jQuery.ajax({
    			url: '/workday/updateday.htm',
        		dataType: 'json',
        		data: {"year":year,"month":month,"date":date,"status":status},
        		success: function(data) {

        		}
			});						
		}
		
		function isWorkday(year,month,date){
			var temp;
			jQuery.ajax({
				async:false,
		    	url: '/workday/isWorkday.htm',
		        dataType: 'json',
		        data: {"year":year,"month":month,"date":date},
		        success: function(data) {
		        	if(data.isworkday == '0')
		        	{
		        		temp = 0;
		        	}
		        	else if(data.isworkday == '1')
		        	{
		        		temp = 1;
		        	}
		        	else if(data.isworkday == '2')
		        	{
		        		temp = 2;
		        	}
		        	else
		        	{
		        		temp = -1;
		        	}
		        }
			});	
			return temp;					
		}
		
		function selectDate(){
		var myyear = jQuery("#setYear").val();
		var mymonth = jQuery("#setMonth").val();
			jQuery.ajax({
    			url: '/workday/selectday.htm',
        		dataType: 'json',
        		data: {"year":myyear,"month":mymonth},
        		success: function(data) {
        		
        			//var nstr= new Date(data.dateStr); //当前Date资讯
        			var nstr= NewDate(data.dateStr);
					var ynow=nstr.getFullYear(); //年份
					var mnow=nstr.getMonth(); //月份
					var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯
					var firstday=n1str.getDay(); //当月第一天星期几
					var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数
					var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数		
					
					document.getElementById("setYear").value = ynow;
					document.getElementById("setMonth").value = mnow+1;
			
					var htmlStr = "<table id='c' border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>";
					for(i=0;i<tr_str;i++) { //表格的行
					   htmlStr = htmlStr + "<tr>";
					   for(k=0;k<7;k++) { //表格每行的单元格
					      idx=i*7+k; //单元格自然序列号
					      date_str=idx-firstday+1; //计算日期
					      (date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的）
					      param = isWorkday(ynow,mnow+1,date_str);		      
					      if(param == 1)//判断是否为工作日并初始化日期
					      {
					      	htmlStr = htmlStr + "<td align='center'>" + date_str + "</td>";
					      }
					      if(param == 0)
					      {
					      	htmlStr = htmlStr + "<td align='center' style='background-color:red;'>" + date_str + "</td>";
					      }
					      if(param == 2)
					      {
					      	htmlStr = htmlStr + "<td align='center' style='background-color:blue;'>" + date_str + "</td>";
					      }
					      if(param == -1)
					      {
					      	htmlStr = htmlStr + "<td align='center'>" + date_str + "</td>";
					      }
					   }
					   htmlStr = htmlStr + "</tr>";
					}
					htmlStr = htmlStr + "</table>";
		   		    jQuery("#cc").html(htmlStr);
		   		    changeStatus(firstday,ynow,mnow);
				}
			});
		}
		
</script>

前段时间写的一个基于数据库的动态生成日历，仅仅是功能性的，样式上没有什么讲究，图省力用了最简单的table，我也是初学JS，贴这段代码仅仅做个备份供以后学习参考。