javascript 簡易日歷控件 應(yīng)用

凝望長空

javascript 簡易日歷控件 應(yīng)用

Javascript代碼

1. 1.function is_leap(year) { return (year%100==0 ? res=(year%400==0 ? 1 : 0) : res=(year%4==0 ? 1: 0)); } //是否為閏年  
   
2. 2.      
   
3. 3.    var nstr=new Date(); //當(dāng)前Date資訊  
   
4. 4.    var year  =  nstr.pattern("yyyy");  
   
5. 5.    var month =  Number(nstr.pattern("MM"));  
   
6. 6.    var ynow=nstr.getFullYear(); //年份  
   
7. 7.    var mnow=nstr.getMonth(); //月份  
   
8. 8.    var dnow=nstr.getDate(); //今日日期  
   
9. 9.    var n1str=new Date(ynow,mnow,1); //當(dāng)月第一天Date資訊  
   
10. 10.      
    
11. 11.    var firstday=n1str.getDay(); //當(dāng)月第一天星期幾  
    
12. 12.      
    
13. 13.    var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,30,31,30,31,30,31); //各月份的總天數(shù)  
    
14. 14.      
    
15. 15.    var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行數(shù)  
    
16. 16.      
    
17. 17.    //打印表格第一行（有星期標(biāo)志）  
    
18. 18.    var tablestr = "";  
    
19. 19.    tablestr +="<table id='ttt' border='1' align='center' width='220px;' style='margin:5px;' 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>";  
    
20. 20.      
    
21. 21.    for(i=0;i<tr_str;i++) { //表格的行  
    
22. 22.       document.write("<tr>");  
    
23. 23.       for(k=0;k<7;k++) { //表格每行的單元格  
    
24. 24.          idx=i*7+k; //單元格自然序列號  
    
25. 25.          date_str=idx-firstday+1; //計算日期  
    
26. 26.          (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; //過濾無效日期（小于等于零的、大于月總天數(shù)的）  
    
27. 27.          //打印日期：今天底色為紅  
    
28. 28.          date_str==dnow ? tablestr +="<td id='calendar_date_"+ date_str+"' style ='color:red;text-align:center;font-weight:bold;'>" + date_str + "</td>" :  tablestr +="<td id='calendar_date_"+ date_str+"' align='center'>" + date_str + "</td>";  
    
29. 29.       }  
    
30. 30.        tablestr +="</tr>"; //表格的行結(jié)束  
    
31. 31.    }  
    
32. 32.     tablestr += "</table>"; //表格結(jié)束

復(fù)制代碼

最后把tablestr寫到頁面上即可，樣式可以自己修飾
document.write(tablestr)或者通過下面的方式寫在Div中：
$("#mycalendar").html(tablestr);




Css代碼

1. 1.table#ttt {  
   
2. 2.            table-layout: fixed;  
   
3. 3.            border-collapse: collapse;  
   
4. 4.            border: #eee 1px solid;  
   
5. 5.        }  
   
6. 6.         
   
7. 7.        table#ttt td {  
   
8. 8.            height: 30px;  
   
9. 9.            border: #eee 1px solid;  
   
10. 10.        }  

復(fù)制代碼

td的Id是我在項目中用到的，為了填充單元格的背景色，表示當(dāng)前月某一天有工作任務(wù)。





Javascript代碼

1. 1.$.getJSON(url,{onlyMeTask:'true',underYear:year,underMonth:month},function(data) {  
   
2. 2.                for ( var i = 0; i < data.length; i++) {  
   
3. 3.                    //alert(data[i].projectName)  
   
4. 4.                    var a  = Number(new Date(data[i].startDateLong).pattern("dd"));  
   
5. 5.                    var b  = Number(new Date(data[i].endDateLong).pattern("dd"));  
   
6. 6.                    if(data[i].fullMoon == '1'){  
   
7. 7.                        continue;  
   
8. 8.                    }  
   
9. 9.                    if(a>b)  
   
10. 10.                        b += 31;  
    
11. 11.                    for (var k = a ;k<=b;k++){  
    
12. 12.                        $("#calendar_date_"+k).css("background","#F4A460");  
    
13. 13.                    }  
    
14. 14.                }  
    
15. 15.            });  

復(fù)制代碼

pitonas

最近在看javascript
3Q

bokezyyx

不錯的控件知識，感謝分享