纯js日历
做日历的初衷是可以随意按照自己的想法定义日历样式和行为，网上的日历插件限制太大
目前日历处于制作阶段，限制只出一个普通版本的，没啥功能，分享下
有兴趣的可以下载附件，运行看效果 https://files.cnblogs.com/z-Relix/calendar.rar
1 <!DOCTYPE HTML> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <style type="text/css"> 7 body,ul,li { 8 margin: 0; 9 padding: 0; 10 } 11 12 .calendar { 13 width: 210px; 14 border: solid #000 1px; 15 } 16 17 .cal_title { 18 position: relative; 19 text-align: center; 20 } 21 .cal_title a { 22 position: absolute; 23 top: 0; 24 left: 0; 25 } 26 .cal_title .cal_next { 27 left: 85%; 28 } 29 30 .cal_week, 31 .cal_date { 32 font-size: 12px; 33 text-align: center; 34 list-style: none; 35 overflow: hidden; 36 } 37 .cal_week li, 38 .cal_date li { 39 float: left; 40 width: 20px; 41 padding: 5px; 42 } 43 44 .cal_date { 45 color: #f00; 46 } 47 .cal_other { 48 color: #ccc; 49 } 50 </style> 51 <body> 52 53 <div id="cal"></div> 54 55 <script src="script/tools.util.js"></script> 56 <script src="script/tools.date.js"></script> 57 <script type="text/javascript"> 58 //调用日历 59 //方式一: st.calendar(); 调用默认日历 60 //方式二: st.calendar(data);diy日历 61 st.calendar({ 62 weekFormat:'' //默认中文星期文本 63 /* 64 * weekFormat: 'EN' //英文星期文本 65 * weekFormat: { //自定义星期文本 66 '0':'', 67 '1':'', 68 '2':'', 69 '3':'', 70 '4':'', 71 '5':'', 72 '6':'' 73 * } 74 */ 75 76 //待续 77 }); 78 </script> 79 </body> 80 </html>
1 (function(){ 2 var SuperTime = function(year,month){ 3 var _date = this._init(year,month), 4 _lastDate = null, 5 _firstDate = null, 6 _yestMonth = null; 7 8 this.date = _date.getDate(); 9 this.month = _date.getMonth() + 1; 10 this.year = _date.getFullYear(); 11 this.day = _date.getDay(); 12 13 _firstDate = this.getFirstDay(); 14 this.firstDay = _firstDate.day; 15 16 _lastDate = this.getlastDate(); 17 this.lastDate = _lastDate.date; 18 this.lastDay = _lastDate.day; 19 20 _nextDate = this.getDate(1); 21 this.nextDate = _nextDate.date; 22 this.nextDay = _nextDate.day; 23 24 _yestDate = this.getDate(-1); 25 this.yesterdate = _yestDate.date; 26 this.yesterday = _yestDate.day; 27 28 _yestMonth = this.getYestMonth(); 29 this.yestMonthAllDate = _yestMonth.allDay; 30 }; 31 32 SuperTime.prototype = { 33 constructor: SuperTime, 34 35 _init: function(year,month) { 36 var date = null; 37 38 if(arguments[0] && arguments[1]) { 39 date = new Date(arguments[0],arguments[1] - 1); 40 } 41 else { 42 date = new Date(); 43 } 44 45 return date; 46 }, 47 48 /** 49 * 获取指定日期是星期几 50 * 51 * @param {undefined,null} 返回今天是星期几 52 * @param {String} '2014-12-31' 返回2014-12-31是星期几 53 * @param {Number} getDay(1)返回明天是星期几，getDay(-1)返回昨天是星期几 54 * 55 * @return {Number} day 星期几 56 */ 57 getDay: function(){ 58 var arg = arguments[0], 59 match = [], 60 day = ''; 61 62 if(!arg) { 63 day = this.day; 64 } 65 else { 66 if(typeof arg === 'number' || typeof arg === 'string') { 67 try { 68 match = arg.split('-'); 69 70 if(match.length > 2) { 71 try { 72 var newDate = new Date(match[0],match[1] - 1,match[2]); 73 74 day = newDate.getDay(); 75 } 76 catch(e) { 77 return e.message; 78 } 79 } 80 } 81 catch(e) { 82 day = changeDate(arg).day; 83 } 84 } 85 else { 86 day = this.day; 87 } 88 } 89 90 return day; 91 }, 92 93 //建议内部使用 94 getlastDate: function(year,month){ 95 var newDate = null; 96 97 if(arguments.length == 2) { 98 newDate = new Date(year,month,0); 99 } 100 else { 101 newDate = new Date(this.year,this.month,0); 102 } 103 104 return { 105 'date': newDate.getDate(), 106 'day': newDate.getDay() 107 }; 108 }, 109 110 //建议内部使用 111 getDate: function(day){ 112 var newDate; 113 114 newDate = changeDate(day); 115 116 return { 117 'date': newDate.date, 118 'day': newDate.day 119 }; 120 }, 121 122 /** 123 * 返回当月第一天是星期几 124 * 125 * @return {Object Date} 126 */ 127 getFirstDay: function(){ 128 var newDate = new Date(this.year,this.month - 1,1); 129 130 return { 131 'day': newDate.getDay() 132 }; 133 }, 134 135 getYestMonth: function(){ 136 var year = this.year, 137 month = this.month, 138 newDate = null; 139 140 if(month == 0) { 141 year = year - 1; 142 month = 12; 143 } 144 145 return { 146 'allDay': this.getlastDate(year,month - 1).date 147 } 148 }, 149 150 calendar: function(data){ 151 var parent = document.getElementById('cal'), 152 title = document.createElement('div'), 153 weekTitle = document.createElement('ul'), 154 dateList = document.createElement('ul'), 155 prev = document.createElement('a'), 156 next = document.createElement('a'); 157 158 var weekFormat = ['日','一','二','三','四','五','六']; 159 160 if(data && typeof data === 'object') { 161 if(data.weekFormat) { 162 if(data.weekFormat === 'EN') { 163 weekFormat = ['Sun','Mon','Tue','Wen','Thu','Fri','Sat']; 164 } 165 else { 166 if(typeof data.weekFormat === 'object') { 167 for(var i in data.weekFormat) { 168 weekFormat[i] = data.weekFormat[i]; 169 } 170 } 171 } 172 } 173 } 174 175 parent.setAttribute('class','calendar'); 176 title.setAttribute('class','cal_title'); 177 weekTitle.setAttribute('class','cal_week'); 178 dateList.setAttribute('class','cal_date'); 179 prev.setAttribute('class','cal_prev'); 180 prev.setAttribute('href','javascript:;'); 181 next.setAttribute('class','cal_next'); 182 next.setAttribute('href','javascript:;'); 183 184 createCal.apply(this,arguments); 185 186 function createCal() { 187 var count = this.firstDay; 188 //日期标题显示 189 title.innerHTML = this.year + '-' + this.month + '-' + this.date; 190 prev.innerHTML = 'prev'; 191 next.innerHTML = 'next'; 192 193 for(var w = 0; w < 7; w++) { 194 //星期显示 195 weekTitle.innerHTML += '<li>' + weekFormat[w] + '</li>'; 196 } 197 198 for(var d = 1, last = this.lastDate; d <= last; d++) { 199 //上月部分日期显示 200 while(count) { 201 dateList.innerHTML += '<li class="cal_other cal_yestMonth">' + (this.yestMonthAllDate - count + 1)+ '</li>'; 202 count--; 203 } 204 //本月日期显示 205 dateList.innerHTML += '<li>' + d + '</li>'; 206 } 207 208 //下月部分日期显示 209 for(var ld = 1, last = (42 - this.firstDay - this.lastDate); ld <= last; ld++) { 210 dateList.innerHTML += '<li class="cal_other cal_nextMonth">' + ld + '</li>'; 211 } 212 append(title,prev,next); 213 append(parent,title,weekTitle,dateList); 214 } 215 216 (function(self){ 217 var btn_p = document.getElementsByClassName('cal_prev'), 218 btn_n = document.getElementsByClassName('cal_next'), 219 newDate = null, 220 year = self.year, 221 month = self.month; 222 223 btn_p[0].addEventListener('click',function(){ 224 month--; 225 if(month == 0) { 226 year--; 227 month = 12; 228 } 229 updateCal(year,month,deleteCal); 230 }); 231 232 btn_n[0].addEventListener('click',function(){ 233 month++; 234 if(month == 13) { 235 year++; 236 month = 1; 237 } 238 239 updateCal(year,month,deleteCal); 240 }); 241 242 function updateCal(year,month,func) { 243 if(func) { 244 func.call(); 245 } 246 247 newDate = new SuperTime(year,month); 248 createCal.apply(newDate); 249 } 250 251 function deleteCal() { 252 removeChildNodes(parent,title,weekTitle,dateList); 253 } 254 255 }(this)); 256 } 257 }; 258 259 /** 260 *根据指定天数改变日期 261 * 262 * @param {Number} day 指定天数，ex 2：两天。 -2：前两天 263 * 264 * @return {Object} 265 */ 266 function changeDate(day) { 267 if(!day || typeof day !== 'number') { 268 return false; 269 } 270 271 var oneday = 1000 * 3600 * 24, 272 newDate = new Date(), 273 newDate = new Date(newDate.getTime() + day * oneday); 274 275 return { 276 'date': newDate.getDate(), 277 'month': newDate.getMonth() + 1, 278 'year': newDate.getFullYear(), 279 'day': newDate.getDay() 280 }; 281 } 282 283 window['st'] = new SuperTime(); 284 })();
