这个日历采用小程序组件化开发，有兴趣的同学可以引用本组件（怎么引用不多赘述，自行去微信小程序开发api了解）

wxml

<!--pages/components/calender.wxml--><view class='calender'><view class='operate'><text catchtap='reduce'>减少</text><text catchtap="add">增加</text></view><view class='year'><text>{{year}}年</text><text>{{currentMonth}}月</text></view><view class='week'><block wx:for="{{weekArr}}" wx:key="{{index}}"><text>{{item}}</text></block></view><view class='date'><block wx:for="{{dateArr}}" wx:key="{{index}}"><text>{{item-(weekNum-1)<=0?"":item-(weekNum-1)>yearMonth[currentMonth-1]?"":item-(weekNum-1)}}</text></block></view></view>

js

// pages/components/calender.jsComponent({data:{weekArr:["日","一","二","三","四","五","六"],yearMonth:[],rowNum:"",dateArr:[],currentMonth:"",year:"",weekNum:""},created:function(){},attached:function(){let T = new Date()this.setData({currentMonth: T.getMonth() + 1,year: T.getFullYear()})//判断闰年let yeartype = (this.data.year % 4 == 0) && (this.data.year % 100 != 0 || this.data.year % 400 == 0)if ( yeartype ){this.setData({yearMonth: [31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]})}else{this.setData({yearMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]})}let currentMonthDay = this.data.year + "-" + this.data.currentMonth +"-01"let weekStr = ""this.setData({weekNum: new Date(currentMonthDay).getDay(),rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth] + new Date(currentMonthDay).getDay())/7)})for( let i=0 ; i<this.data.rowNum ; i++ ){for( let j = 0 ; j<7 ; j++ ){this.data.dateArr.push(i*7+j)}}this.setData({dateArr:this.data.dateArr})},methods:{//获取下一个月份add:function(){this.triggerEvent("addone")this.setData({dateArr: []})if (this.data.currentMonth==12 ){this.setData({currentMonth: 1,year:this.data.year+1})}else{this.setData({currentMonth: this.data.currentMonth + 1})}let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"let weekStr = ""this.setData({weekNum: new Date(currentMonthDay).getDay(),rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)})for (let i = 0; i < this.data.rowNum; i++) {for (let j = 0; j < 7; j++) {this.data.dateArr.push(i * 7 + j)}}this.setData({dateArr: this.data.dateArr})},//获取上一个月份reduce:function(){this.triggerEvent("reduceone")this.setData({dateArr:[]})if (this.data.currentMonth == 1) {this.setData({currentMonth: 12,year: this.data.year - 1})} else {this.setData({currentMonth: this.data.currentMonth - 1})}let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"let weekStr = ""this.setData({weekNum: new Date(currentMonthDay).getDay(),rowNum: Math.ceil((this.data.yearMonth[this.data.currentMonth-1] + new Date(currentMonthDay).getDay()) / 7)})for (let i = 0; i < this.data.rowNum; i++) {for (let j = 0; j < 7; j++) {this.data.dateArr.push(i * 7 + j)}}this.setData({dateArr: this.data.dateArr})console.log(this.data.dateArr)}}})

wxss

.operate{width:100%;display: flex;flex-direction: row;justify-content: space-around;font-size: 32rpx;color:#000;padding-bottom: 40rpx;}.year{padding:0 30%;display: flex;flex-direction: row;justify-content: space-around;font-size:32rpx;color:#404040;margin-bottom: 40rpx;}.calender{display: flex;flex-direction: column;padding:0 4.5%;width:91%;border-top:1rpx solid #eaeaea;padding-top:30rpx;color:#404040;}.calender .week{display: flex;flex-direction: row;}.calender .week text{width:14%;text-align: center;font-size:26rpx;}.calender .date text{width:14%;display: inline-block;text-align: center;font-size:26rpx;color:#000;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。