wxml代码:`
!--wxml--!--日历,记录女性月经周期--view class="calendar"!--年份和月份--view class="flex calendar-choose"!--图标--view class="previcon" bindtap="changeMonth"image src="../../images/small.png"/image/view!--显示月份--view class="mouth-picker"view class="month"{{cur_month}}月/view/view!--显示年份--view class="year-picker"view class="year"{{cur_year}}年/view/view!--图标--view class="nexticon" bindtap="changeYear"image src="../../images/big.png" /image/view/viewview class="flex week-list"view class="week-itm" wx:for="{{weeklist}}"{{item}}/view/viewview class="flex days-list"view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev"text{{item}}/text/viewblock wx:for="{{currentMonthDaysList}}"view class="day"text{{item}}/text/view/blockview class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" text{{item}}/text/view/view/viewwxss代码:
.calendar{ width:100%; height:300rpx; }.calendar-choose{ height:100rpx; line-height:100rpx; background:#fefefe; padding:0 30rpx; font-size:34rpx; color:#353535; border-bottom: 1rpx solid #e5e5e5; display:flex; justify-content:space-between;}.calendar .previcon, .calendar .nexticon{ width:20%; height:40%; margin-top:12rpx;}.previcon image, .nexticon image { width:100%; height:100%;}.calendar .mouth-picker{ width:600rpx; text-align: center; }.calendar .year-picker{ width:600rpx; text-align: center; }.calendar .week-list{ width:100%; height:70rpx; background:#b9c4c9; display:flex; justify-content:space-around;}.calendar .week-itm{ font-size:30rpx; color:white; width:14.28%; height:100%; padding-left:43rpx; padding-top:15rpx;}.calendar .days-list{ width:100%; display:flex; flex-wrap:wrap;}.day{ width: 14%; height:60rpx; border-right:1rpx solid #e5e5e5; border-bottom:1rpx solid #e5e5e5; color:#333; position: relative; text-align: center; line-height: 60rpx; }.calendar .days-list .lm,.calendar .days-list .nm{ color:#b6b6b6; }.calendar .day .ep{ color:#333; }js代码:
Page({ data: { cur_month: 0, cur_year: 0, weeklist: ['日', '一', '二', '三', '四', '五', '六'] }, onLoad: function (options) { var cur_year = new Date().getFullYear(); //获取当前年 var cur_month = new Date().getMonth(); //获取当前月 this.setData({ cur_year: cur_year, cur_month: cur_month + 1 }); this.calendar(cur_year, cur_month + 1); }, //页面相关事件处理函数--监听用户下拉动作 onPullDownRefresh: function () { }, /** 页面上拉触底事件的处理函数 **/ onReachBottom: function () { }, /* 用户点击右上角分享 */ onShareAppMessage: function () { return { title: '简单日历实现小程序版本', desc: '简单日历实现小程序版本', path: '/pages/index/index' }; }, calendar: function(year, month) { var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; /** * 本月天数 */ if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { days[1] = 29; } var day = days[month - 1]; /** * 本月第一天星期几 */ var myDate = new Date(year, month - 1, 1); var weektime = myDate.getDay(); /** * 上个月的天数 */ if(month == 1) { var prevyear = year - 1; var prevmonth = 12; var prevday = 31; } else { prevmonth = month - 1; prevday = days[prevmonth - 1]; } /** * 下个月的天数 */ if(month == 12) { var nextyear = year + 1; var nextmonth = 1; var nextday = 31; } else { nextmonth = month + 1; nextday = days[nextmonth - 1]; } /** * 日历上第一个数字 */ if(weektime == 0) { var firstnumber = 1; } else { firstnumber = prevday - weektime + 1; } /** * 日历上最后一个数字 */ if(firstnumber == 1) { var lastnumber = 7 - (day % 7); } else { if ((prevday - firstnumber + 1 + day) % 7 == 0) { lastnumber = day; } else { var remainder = (prevday - firstnumber + 1 + day) % 7; lastnumber = 7 - remainder; } } var lastMonthDaysList = []; var currentMonthDaysList = []; var nextMonthDaysList = []; if(firstnumber == 1) { lastMonthDaysList = []; } else{ for(var i = firstnumber; i = prevday; i++) { lastMonthDaysList.push(i); } } for(var i = 1; i = day; i++) { currentMonthDaysList.push(i); } if(lastnumber == day) { nextMonthDaysList = []; } else { for(var i = 1; i = lastnumber; i++) { nextMonthDaysList.push(i); } } this.setData({ lastMonthDaysList: lastMonthDaysList, currentMonthDaysList: currentMonthDaysList, nextMonthDaysList: nextMonthDaysList }) }, changeMonth: function(e) { var cur_year = this.data.cur_year; if(this.data.cur_month == 1) { var cur_month = 12; cur_year = cur_year - 1; } else { cur_month = this.data.cur_month - 1; } this.setData({ cur_year: cur_year, cur_month: cur_month }); //console.log('cur_year', cur_year); //console.log('cur_month', cur_month); this.calendar(cur_year, cur_month); }, changeYear: function(e) { var cur_year = this.data.cur_year - 1; var cur_month = this.data.cur_month; this.setData({ cur_year: cur_year, cur_month: cur_month }) this.calendar(cur_year, cur_month); }})效果图:
(有在网上参考别人的代码,写的不好,欢迎交流。)













