1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>blog式日历控件</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var $ = function (id) { 10 return "string" == typeof id ? document.getElementById(id) : id; 11 }; 12 13 var Class = { 14 create: function() { 15 return function() { 16 this.initialize.apply(this, arguments); 17 } 18 } 19 } 20 21 var Extend = function(destination, source) { 22 for (var property in source) { 23 destination[property] = source[property]; 24 } 25 return destination; 26 } 27 28 29 var Calendar = Class.create(); 30 Calendar.prototype = { 31 initialize: function(container, options) { 32 this.Container = $(container);//容器(table结构) 33 this.Days = [];//日期对象列表 34 35 this.SetOptions(options); 36 37 this.Year = this.options.Year || new Date().getFullYear(); 38 this.Month = this.options.Month || new Date().getMonth() + 1; 39 this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; 40 this.onSelectDay = this.options.onSelectDay; 41 this.onToday = this.options.onToday; 42 this.onFinish = this.options.onFinish; 43 44 this.Draw(); 45 }, 46 //设置默认属性 47 SetOptions: function(options) { 48 this.options = {//默认值 49 Year: 0,//显示年 50 Month: 0,//显示月 51 SelectDay: null,//选择日期 52 onSelectDay: function(){},//在选择日期触发 53 onToday: function(){},//在当天日期触发 54 onFinish: function(){}//日历画完后触发 55 }; 56 Extend(this.options, options || {}); 57 }, 58 //当前月 59 NowMonth: function() { 60 this.PreDraw(new Date()); 61 }, 62 //上一月 63 PreMonth: function() { 64 this.PreDraw(new Date(this.Year, this.Month - 2, 1)); 65 }, 66 //下一月 67 NextMonth: function() { 68 this.PreDraw(new Date(this.Year, this.Month, 1)); 69 }, 70 //上一年 71 PreYear: function() { 72 this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); 73 }, 74 //下一年 75 NextYear: function() { 76 this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); 77 }, 78 //根据日期画日历 79 PreDraw: function(date) { 80 //再设置属性 81 this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; 82 //重新画日历 83 this.Draw(); 84 }, 85 //画日历 86 Draw: function() { 87 //用来保存日期列表 88 var arr = []; 89 //用当月第一天在一周中的日期值作为当月离第一天的天数 90 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } 91 //用当月最后一天在一个月中的日期值作为当月的天数 92 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } 93 //清空原来的日期对象列表 94 this.Days = []; 95 //插入日期 96 var frag = document.createDocumentFragment(); 97 while(arr.length){ 98 //每个星期插入一个tr 99 var row = document.createElement("tr"); 100 //每个星期有7天 101 for(var i = 1; i <= 7; i++){ 102 var cell = document.createElement("td"); cell.innerHTML = " "; 103 if(arr.length){ 104 var d = arr.shift(); 105 if(d){ 106 cell.innerHTML = d; 107 this.Days[d] = cell; 108 var on = new Date(this.Year, this.Month - 1, d); 109 //判断是否今日 110 this.IsSame(on, new Date()) && this.onToday(cell); 111 //判断是否选择日期 112 this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); 113 } 114 } 115 row.appendChild(cell); 116 } 117 frag.appendChild(row); 118 } 119 //先清空内容再插入(ie的table不能用innerHTML) 120 while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } 121 this.Container.appendChild(frag); 122 //附加程序 123 this.onFinish(); 124 }, 125 //判断是否同一日 126 IsSame: function(d1, d2) { 127 return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); 128 } 129 } 130 </script> 131 <style type="text/css"> 132 133 .Calendar { 134 font-family:Verdana; 135 font-size:12px; 136 background-color:#e0ecf9; 137 text-align:center; 138 width:200px; 139 height:160px; 140 padding:10px; 141 line-height:1.5em; 142 } 143 .Calendar a{ 144 color:#1e5494; 145 } 146 147 .Calendar table{ 148 width:100%; 149 border:0; 150 } 151 152 .Calendar table thead{color:#acacac;} 153 154 .Calendar table td { 155 font-size: 11px; 156 padding:1px; 157 } 158 #idCalendarPre{ 159 cursor:pointer; 160 float:left; 161 padding-right:5px; 162 } 163 #idCalendarNext{ 164 cursor:pointer; 165 float:right; 166 padding-right:5px; 167 } 168 #idCalendar td.onToday { 169 font-weight:bold; 170 color:#C60; 171 } 172 #idCalendar td.onSelect { 173 font-weight:bold; 174 } 175 </style> 176 <div class="Calendar"> 177 <div id="idCalendarPre"><<</div> 178 <div id="idCalendarNext">>></div> 179 <span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月 180 <table cellspacing="0"> 181 <thead> 182 <tr> 183 <td>日</td> 184 <td>一</td> 185 <td>二</td> 186 <td>三</td> 187 <td>四</td> 188 <td>五</td> 189 <td>六</td> 190 </tr> 191 </thead> 192 <tbody id="idCalendar"> 193 </tbody> 194 </table> 195 </div> 196 197 <input id="idCalendarPreYear" type="button" value="上一年" /> 198 <input id="idCalendarNow" type="button" value="当前月" /> 199 <input id="idCalendarNextYear" type="button" value="下一年" /> 200 201 <script language="JavaScript"> 202 203 var cale = new Calendar("idCalendar", { 204 SelectDay: new Date().setDate(10), 205 onSelectDay: function(o){ o.className = "onSelect"; }, 206 onToday: function(o){ o.className = "onToday"; }, 207 onFinish: function(){ 208 $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; 209 var flag = [10,15,20]; 210 for(var i = 0, len = flag.length; i < len; i++){ 211 this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>"; 212 } 213 } 214 }); 215 216 $("idCalendarPre").onclick = function(){ cale.PreMonth(); } 217 $("idCalendarNext").onclick = function(){ cale.NextMonth(); } 218 219 $("idCalendarPreYear").onclick = function(){ cale.PreYear(); } 220 $("idCalendarNextYear").onclick = function(){ cale.NextYear(); } 221 222 $("idCalendarNow").onclick = function(){ cale.NowMonth(); } 223 224 </script> 225 </body> 226 </html>
我网上找了一个js博客日历的代码,代码中定义了var flag = [10,15,20]; ,效果是每月都是这三天有链接,我想要实现的是定义var flag = [2013-4-10,2013-4-15,2013-4-20]; ,效果是指定的这三天有链接,我对js不太熟,不知道要怎么改,请高手指教,谢谢!