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></view><view class="flex week-list"> <view class="week-itm" wx:for="{{weeklist}}">{{item}}</view> </view><view class="flex days-list"> <view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev"> <text>{{item}}</text> </view> <block wx:for="{{currentMonthDaysList}}"> <view class="day"> <text>{{item}}</text> </view> </block> <view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" > <text>{{item}}</text> </view> </view></view>

wxss代碼：

.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);}})

效果圖：

（有在網上參考別人的代碼，寫的不好，歡迎交流。）

總結

以上是生活随笔為你收集整理的日历代码（微信小程序）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。