老早之前寫過(guò)一個(gè)js日歷的方法，但是和dom耦合太強(qiáng)，并且邏輯復(fù)雜化，在原來(lái)的基礎(chǔ)上進(jìn)行了優(yōu)化，重寫了日歷方法。

效果圖如下，dom結(jié)構(gòu)為一個(gè)div，里面包含了 7*6=42 個(gè)元素，左浮動(dòng)排列

在線效果(手機(jī)端)：https://nbin2008.github.io/demo/jsDate/index3.html

源碼如下：

/* * 日歷控件 var Dw = new DateWeek(),dt = new Date(); Dw.setDate(dt.getFullYear(),dt.getMonth()-0+1); var list = Dw.getDayList(bool); //bool:true，自適應(yīng)長(zhǎng)度，會(huì)刪除首/尾不是當(dāng)月的一周。bool:false，固定7行*6列=42條數(shù)據(jù) list = [{date:"2018-1-28"day:28siblings:true //上月或者下月的日期，用于區(qū)分本月和非本月的日期week:0 //0:星期一，1:星期二。。。}... ] */ (function(window){var proto = {getDay: function(y, m) {var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) //判斷是否是閏月 mday[1] = 29;return mday[m - 1];},getWeek: function(y, m, d) {var wk;if (m <= 12 && m >= 1) {for (var i = 1; i < m; ++i) {d += this.getDay(y, i);}}/*根據(jù)日期計(jì)算星期的公式*/wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;//0對(duì)應(yīng)星期天，1對(duì)應(yīng)星期一 return parseInt(wk);},getName: function(year,month,day){return year + "-" + month + "-" + day;},getPrev: function(y,m){if( m-1 == 0){return {y: y-1,m: 12,d: this.getDay(y-1, 12)};}else{return {y: y,m: m-1,d: this.getDay(y, m-1)};}},getNext: function(y,m){if( m+1 > 12 ){return {y: y+1,m: 1,d: this.getDay(y+1, 1)};}else{return {y: y,m: m+1,d: this.getDay(y, m+1)};};},setDay: function(date,day,siblings){var tmp = date.match(/\d+/gi);this.dayList.push({date: date,day: day,week: this.getWeek(+tmp[0],+tmp[1],+tmp[2]),siblings: !!siblings,})},clear: function(){this.dayList = [];},setDate: function(year, month){var cache_name = year + "-" + month;if (this.cache[cache_name]) {this.dayList = this.cache[cache_name];return this;}//this.clear();var name = null,index = 0,year = parseInt(year),month = parseInt(month),dayTotal = this.getDay(year, month),weekFirst = this.getWeek(year,month,1),weekLast = this.getWeek(year,month,dayTotal);//上月的數(shù)據(jù)var prev = this.getPrev(year, month),prevDate = prev.d - weekFirst + 1;for (var i=0; i<weekFirst; i++) {name = this.getName(prev.y, prev.m, prevDate);this.setDay(name,prevDate,1);prevDate++;index++;}//本月數(shù)據(jù)for (var i=1; i<=dayTotal; i++) {name = this.getName(year, month, i);this.setDay(name,i);index++;}//下月數(shù)據(jù)var next = this.getNext(year, month),day = 1;while (index<this.maxLen) {name = this.getName(next.y, next.m, day);this.setDay(name,day,1);index++;day++;};//緩存this.cache[cache_name] = JSON.parse(JSON.stringify(this.dayList));return this;},getDayList: function(bool) {var list = JSON.parse(JSON.stringify(this.dayList));if (bool) {var len = 7;count = 0;for (var i=list.length-1; len>=1; i--,len--) {if (list[i]['siblings']) {count++;}}if (count==7) {len = 7;while (len) {list.pop();len--;}}}return list;},init: function(){this.cache = {};this.dayList = [];this.maxLen = 42;return this;}}function DateWeek(){return this.init();};DateWeek.prototype = proto;DateWeek.prototype.constructor = DateWeek;window.DateWeek = DateWeek; })(window);

使用方法：

var Dw = new DateWeek(),
? ? dt = new Date();
Dw.setDate(dt.getFullYear(), +dt.getMonth()+1);

var list = Dw.getDayList(1);?

list的數(shù)據(jù)格式如下，

day：25，25號(hào)

siblings：true，不是當(dāng)月的日。當(dāng)前查看的是3月的日歷，那么2月和4月的siblings都會(huì)true，用于區(qū)分本月

week：星期。對(duì)應(yīng)關(guān)系：0-星期日，1星期一，2星期二。。。

得到了日歷的list，剩下的就容易了。

getDayList(bool)方法，傳入一個(gè)bool值，為true，則去掉不包含當(dāng)月的一個(gè)星期的數(shù)據(jù)：

總結(jié)

以上是生活随笔為你收集整理的js写一个定制日历的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。