微信小程序日历签到，拿走即用~

参考了小友那个谁的，具体也忘记了，改be改be即用了，因为是日历，里面有一个算空格的地方，嘻嘻~，也是小友提供的，再次感谢！

html：

<view>
    <view class="flex flex-wrap padding bg-white justify-center">
        <view class="t-txt text-orange margin-top">挑战连续签到30天</view>
        <view class="w-text text-blue">挑战签到任务，领取更多奖励</view>
    </view>

    <view class="padding">
        <view class="flex justify-between padding bg-white radius">
            <view class="jhx_f4">签到记录</view>
            <text class="q-text">已签到{{signDays}}天</text>
        </view>
        <view class="calendar">
            <view class="time">
                <view>
                  <text class="t_blue">{{year}}</text>年
                  <text class="t_blue">{{month}}</text>月
                  <text class="t_blue">{{date}}</text>日
                </view>
            </view>

            <view class="weekName">
                <view>日</view>
                <view class="monday">一</view>
                <view class="tuesday">二</view>
                <view class="wednesday">三</view>
                <view class="thursday">四</view>
                <view class="friday">五</view>
                <view>六</view>
            </view>

            <view class="week">
                <!-- 填补空格-->
                <view wx:for="{{nbsp}}" wx:key="index" style="color:#fff;">空</view>

                <view wx:for="{{calendarSignData}}" wx:key="index">
                    <text wx:if="{{item.sign}}" class="qiandao iconfont icon-qiandaolingjiang">
                    </text>
                    <text wx:else>{{item.monthDay}}</text> 
                </view>
            </view>

            <view class="calendarSign">
                <button size="large" wx:if="{{!isSign}}" bindtap="calendarSign">签到</button>
                <button size="large" wx:else bindtap="calendarSign">今日已签到</button>
            </view>
        </view>
    </view>

    <view class="padding bg-white">
        <view>签到规则：</view>
        <view class="tips">
            <view>{{rules}}</view>
        </view>
    </view>
</view>

---

js：

const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');

const app = getApp();
var that;

Page({
  data: {
    year: '',
    month: '',
    nbsp: '',
    date: '',
    monthDaySize: '',
    calendarSignData: [],
    continueSignDays: 0,
    signDays: 0,
    rules: [],
    isSign: false   //今日签到状态
  },
  //签到
  calendarSign() {
    let date = this.getNowFormatDate();

    util.request(api.SignCheckIn, {
      yearMonthDay: date
    }).then(res=> {
      if (res.errno === 0) {
        this.getCheckedInRecord(this.data.year, this.data.month, this.data.monthDaySize);
        wx.showToast({
          title: '签到成功',
          icon: 'success',
          duration: 2000
        })

        this.getMonthSign(this.data.year, this.data.month);  //签到汇总
      }
    });
  },
  //当前时间
  getNowFormatDate() {
    let date = new Date();
    let seperator1 = "-";
    let month = date.getMonth() + 1;
    let strDate = date.getDate();

    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }

    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }

    let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
    return currentdate;
  },
  //获取已签到日期
  getCheckedInRecord(year, month, monthDaySize) {
    const yearMonth = year+'-'+month; 
    const date = that.data.date>9? that.data.date: '0'+that.data.date;
    const Tdate = year+'-'+month+'-'+date;

    util.request(api.SignRecord, {
        yearMonth: yearMonth
    }).then(res=> {
      if (res.errno === 0) {
        const todayInfo = res.data.find(item=>{ return item.date == Tdate})
        this.setData({
          calendarSignData: res.data,
          isSign: todayInfo.sign
        })
      }
    });
  },
 // 签到汇总数据
  getMonthSign(year, month) {
    const date = year+'-'+month;    

    util.request(api.signInfo).then(res=> {
      if (res.errno === 0) {
        console.log(res.data)
        this.setData({
          // continueSignDays: res.data.continueSignDays,
          calendarSignData: res.data.signCalendar,
          signDays: res.data.signDays,
          rules: res.data.rules
        })
      }
    }).catch(err=>{
      console.log(err)
    });
  },
  //初始化
  init() {
    let mydate = new Date(); //本地时间
    let year = mydate.getFullYear(); //年
    let month = mydate.getMonth() + 1; //月
    let date = mydate.getDate(); //今日
    let monthDaySize; //天数
    if(month == 1||month == 3||month == 5||month == 7||month == 8||month == 10||month == 12) {
       monthDaySize = 31;
    } else if (month == 4|| month == 6|| month == 9|| month == 11) {
       monthDaySize = 30;
    } else if (month == 2) { //计算是否是闰年,如果是二月份则是29天
       if ((year - 2000) % 4 == 0) {
          monthDaySize = 29;
       } else {
          monthDaySize = 28;
       }
    };

    var day = new Date(year,month-1,1);
    let nbsp = day.getDay(); //空格

    this.setData({
      year: year,
      month: month,
      nbsp: nbsp,
      date: date,
      monthDaySize: monthDaySize
    })

    this.getCheckedInRecord(year, month, monthDaySize) //获取已签到日期
    this.getMonthSign(year, month);  //签到汇总
  },
  onLoad() {
    that = this;
    that.init() //初始化
  }
})

---

css：

.t-txt{
  font-size: 50rpx;
  margin-bottom: 10rpx;
}

.w-text{
  font-size: 26rpx;
}

.q-text{
  font-size: 26rpx;
}

.calendar {
  padding: 10rpx;
  border-radius: 15rpx;
  background-color: #fff;
}
.time {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 0 20rpx;
  text-align: center;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  background-color: #fff;
}
.time view {
  flex: 1;
  font-size: 38rpx;
  font-weight: bold;
  color: #f95c4b;
}
.weekName {
  display: flex;
  font-size: 30rpx;
  padding: 16rpx 0;
  margin: 15rpx 15rpx 0 15rpx;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  background-color: #f95c4b;
}
.weekName view {
  flex: 1;
  text-align: center;
  color: #fff;
}
.week {
  margin: 0 15rpx 15rpx 15rpx;
  font-size: 30rpx;
}
.week view {
  width: 14.2%;
  height: 70rpx;
  line-height: 70rpx;
  display: inline-block;
  margin: 10rpx 0;
  text-align: center;
}
.week view text {
  width: 100%;
  height: 100%;
  display: inline-block;
  font-family: '微软雅黑';
}
.calendarSign {
 margin: 20rpx;
}

.qiandao{
  font-size: 38rpx;
  font-weight: 600;
  color: #f95c4b;
}

button{padding:20rpx;margin:0;line-height:normal;background-color:#f8f8f8;}

.tips{
  line-height: 40rpx;
  margin-top: 10rpx;
}