微信小程序实现打卡日历功能

<!--pages/Calendar/Calendar.wxml--><!-- 打卡日历页面 --><view class='all'> <view class="bar">  <!-- 上一个月 -->  <view class="previous" bindtap="handleCalendar" data-handle="prev">   <image src='../../images/pre.png'></image>  </view>  <!-- 显示年月 -->  <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>  <!-- 下一个月 -->  <view class="next" bindtap="handleCalendar" data-handle="next">   <image src='../../images/next.png'></image>  </view> </view> <!-- 显示星期 --> <view class="week">  <view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view> </view> <view class='days'>  <!-- 列 -->  <view class="columns" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i">   <view wx:for="{{days}}" wx:for-index="j" wx:key="j">    <!-- 行 -->    <view class="rows" wx:if="{{j/7 == i}}">     <view class="rows" wx:for="{{7}}" wx:for-index="k" wx:key="k">      <!-- 每个月份的空的单元格 -->      <view class='cell' wx:if="{{days[j+k].date == null}}">       <text decode="{{true}}">  </text>      </view>      <!-- 每个月份的有数字的单元格 -->      <view class='cell' wx:else>       <!-- 当前日期已签到 -->       <view wx:if="{{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'>        <text>{{days[j+k].date}}</text>       </view>       <!-- 当前日期未签到 -->       <view wx:else>        <text>{{days[j+k].date}}</text>       </view>      </view>     </view>    </view>   </view>  </view> </view> <!-- 坚持打卡天数 --> <view class='count'>  <text>截至目前，你已坚持打卡</text>  <view class='daynumber'>  <text class='number'>{{count}}</text>  <text class='day'>天</text>  </view>    <text>请再接再厉，继续努力</text> </view></view>

/* pages/Calendar/Calendar.wxss *//* 打卡日历 */.all{ margin-top: 20rpx;}.all .bar{ display: flex; flex-direction: row; justify-content: space-between; margin: 30rpx 20rpx; padding: 10rpx;}.all .bar image{ width: 50rpx; height: 50rpx;}.all .week{ display: flex; flex-direction: row; justify-content: space-between; padding: 20rpx; padding-left: 40rpx; padding-right: 40rpx; margin: 20rpx; border-radius: 10px; background-color: #acd;}.all .days{ margin: 20rpx; padding: 10rpx; border-radius: 10px; background-color: #acd;}.all .columns{ display: flex; flex-direction: column; justify-content: space-between; }.all .columns .rows{ display: flex; flex-direction: row; justify-content: space-between;}.all .columns .rows .cell{ width: 84rpx; height: 88rpx; margin: 3rpx; text-align: center; border-radius: 50%; display: flex; flex-direction: column; justify-content: center;}.count .daynumber{ display: flex; flex-direction: row; justify-content: center;}.count .daynumber .day{ margin-top: 50rpx;}.count{ margin: 20rpx; padding: 30rpx; display: flex; text-align: center; border-radius: 10px; flex-direction: column; justify-content: center; background-color: #acd; align-items: center;}.count .number{ color: red; font-size: 60rpx; background-color: #fff; width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; margin: 20rpx;}.count text{ margin: 10rpx;}

// pages/Calendar/Calendar.js//打卡日历页面var util = require('../../utils/util.js');var Bmob = require('../../utils/bmob.js');Page({ /**  * 页面的初始数据  */ data: {  objectId:'',  days:[],  signUp:[],  cur_year:0,  cur_month:0,  count:0 }, /**  * 生命周期函数--监听页面加载  */ onLoad: function (options) {  this.setData({objectId : options.objectId});   //获取当前年月   const date = new Date();  const cur_year = date.getFullYear();  const cur_month = date.getMonth() + 1;  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];  this.calculateEmptyGrids(cur_year, cur_month);  this.calculateDays(cur_year, cur_month);  //获取当前用户当前任务的签到状态  this.onGetSignUp();  this.setData({   cur_year,   cur_month,   weeks_ch  }) }, /**  * 生命周期函数--监听页面初次渲染完成  */ onReady: function () { }, /**  * 生命周期函数--监听页面显示  */ onShow: function () { }, /**  * 生命周期函数--监听页面隐藏  */ onHide: function () { }, /**  * 生命周期函数--监听页面卸载  */ onUnload: function () { }, /**  * 页面相关事件处理函数--监听用户下拉动作  */ onPullDownRefresh: function () { }, /**  * 页面上拉触底事件的处理函数  */ onReachBottom: function () { }, /**  * 用户点击右上角分享  */ onShareAppMessage: function () { }, // 获取当月共多少天 getThisMonthDays:function(year, month){   return new Date(year, month, 0).getDate() }, // 获取当月第一天星期几 getFirstDayOfWeek:function(year, month) {  return new Date(Date.UTC(year, month - 1, 1)).getDay(); }, // 计算当月1号前空了几个格子，把它填充在days数组的前面 calculateEmptyGrids:function(year, month) {  var that = this;  //计算每个月时要清零  that.setData({days:[]});  const firstDayOfWeek = this.getFirstDayOfWeek(year, month);    if (firstDayOfWeek > 0) {   for (let i = 0; i < firstDayOfWeek; i++) {    var obj = {     date:null,     isSign:false    }    that.data.days.push(obj);   }   this.setData({    days:that.data.days   });  //清空  } else {   this.setData({    days: []   });  } }, // 绘制当月天数占的格子，并把它放到days数组中 calculateDays:function(year, month) {  var that = this;  const thisMonthDays = this.getThisMonthDays(year, month);  for (let i = 1; i <= thisMonthDays; i++) {   var obj = {    date: i,    isSign: false   }   that.data.days.push(obj);  }  this.setData({   days:that.data.days  }); }, //匹配判断当月与当月哪些日子签到打卡 onJudgeSign:function(){  var that = this;  var signs = that.data.signUp;  var daysArr = that.data.days;  for (var i=0; i < signs.length;i++){   var current = new Date(signs[i].date.replace(/-/g, "/"));   var year = current.getFullYear();   var month = current.getMonth()+1;   var day = current.getDate();   day = parseInt(day);   for (var j = 0; j < daysArr.length;j++){    //年月日相同并且已打卡    if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day && signs[i].isSign == "今日已打卡"){     daysArr[j].isSign = true;    }   }  }  that.setData({days:daysArr}); }, // 切换控制年月，上一个月，下一个月 handleCalendar:function(e) {  const handle = e.currentTarget.dataset.handle;  const cur_year = this.data.cur_year;  const cur_month = this.data.cur_month;  if (handle === 'prev') {   let newMonth = cur_month - 1;   let newYear = cur_year;   if (newMonth < 1) {    newYear = cur_year - 1;    newMonth = 12;   }   this.calculateEmptyGrids(newYear, newMonth);   this.calculateDays(newYear, newMonth);   this.onGetSignUp();      this.setData({    cur_year: newYear,    cur_month: newMonth   })  } else {   let newMonth = cur_month + 1;   let newYear = cur_year;   if (newMonth > 12) {    newYear = cur_year + 1;    newMonth = 1;   }   this.calculateEmptyGrids(newYear, newMonth);   this.calculateDays(newYear, newMonth);   this.onGetSignUp();      this.setData({    cur_year: newYear,    cur_month: newMonth   })  } }, //获取当前用户该任务的签到数组 onGetSignUp:function(){  var that = this;  var Task_User = Bmob.Object.extend("task_user");  var q = new Bmob.Query(Task_User);  q.get(that.data.objectId, {   success: function (result) {    that.setData({     signUp : result.get("signUp"),     count : result.get("score")    });    //获取后就判断签到情况    that.onJudgeSign();   },   error: function (object, error) {   }  });   }})

{ "navigationBarTitleText": "打卡日历"}