微信小程序一个特定时间段内的日历控件,加上签到功能

效果图

js

  doDrawCalendar: function (startTime,period){
    var daysMapList = [];
    var curMonth = -1;
    var dateMap = {};
    var that = this;
    for (var i = 0; i < period; i++) {
      dateMap = that.getDayAfter(startTime, i);
      if (dateMap['month'] !== curMonth) {
        var monthMap = {
          'month': true,
          'key': dateMap['weekDay'],
          'value': dateMap['month'] + "月"
        };
        daysMapList.push(monthMap);
        for (var j = 0; j < dateMap['weekDay']; j++) {
          var spanMap = {
            'key': '',
            'value': ''
          };
          daysMapList.push(spanMap);
        }
        
        curMonth = dateMap['month'];
      } 
      var dayMap = {
        'key': dateMap['weekDay'],
        'value': dateMap['day'],
      };
      if (that.testIfInList(that.data.signList, i + 1)) {
        dayMap['sign'] = true
      }
      daysMapList.push(dayMap);
      dateMap = {};
    }
    this.setData({
      daysMapList:daysMapList
    })
  },
  getDayAfter: function (tTime, n) {
    var milliseconds = (new Date(tTime.replace(/-/g, "/"))).getTime() + 1000 * 60 * 60 * 24 * n;
    var nextDate = new Date(milliseconds);
    // console.log(milliseconds);
    var dateMap = {
      "month": nextDate.getMonth() + 1,
      "day": nextDate.getDate(),
      "weekDay": nextDate.getDay()
    }
    return dateMap;
  },
  testIfInList: function (list, n) {
    for (var i = 0; i < list.length; i++) {
      if (n == list[i]) {
        return true;
      }
    }
    return false;
  }

wxml

    <view id="calendar-label-container">
      <view id="calendar-title">你已累计学习 <text>{{learnDays}}</text> 天</view>
      <view id="calendar-week-label-container">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
      </view>
    </view>
    <scroll-view class="calendar-body-container-scroll" scroll-y="true">
      <view class="calendar-body-container">
        <view wx:for="{{daysMapList}}" wx:key="{{index}}" data-idx="{{index}}" class="{{item.month?'month-container':''}}" style='padding-left:{{item.month?((item.key)*100+20):0}}rpx'>
          <image src='imgs/sign_icon.png' class='sign-icon {{item.sign?"sign-icon-show":""}}'></image>
          <text class="{{item.sign?'text_blue':''}} {{item.month?'month_color':''}}">{{item.value}}</text>
        </view>
        <!-- <image src='imgs/arrow_down.png' class="scroll-icon"></image> -->
      </view> 
    </scroll-view>
  </view>

css

  position: absolute;
  top: 536rpx;
  border-radius: 10rpx;
  width: 710rpx;
  /* height: 350rpx; */
  left: 20rpx;
  right: 20rpx;
  bottom: 14rpx;
  box-shadow:1rpx 1rpx 8rpx #E9EEF0,1rpx -1rpx 8rpx #E9EEF0,-1rpx 1rpx 8rpx #E9EEF0,-1rpx -1rpx 8rpx #E9EEF0;
}

#calendar-label-container{
  height: 170rpx;
  width: 100%;
  /* background-color: #eeeeee; */
  /* border-bottom: 1rpx solid #eeeeee; */
}

#calendar-title{
  margin-bottom: 20rpx;
  color: #3D5DC6;
  font-weight: 500;
  font-size: 32rpx;
  text-align: center
}

#calendar-title>text{
  color: #D26282;
  font-weight: 500;
  font-size: 55rpx;
}

#calendar-week-label-container{
  width: 700rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: space-between
}

#calendar-week-label-container>view{
  color: #878787;
  font-size: 28rpx;
  width: 100rpx;
  text-align: center;
  font-weight: 500;
}

.calendar-body-container-scroll{
  position: absolute;
  top:170rpx;
  bottom: 0rpx;
  padding-top: 20rpx;
}

.calendar-body-container{
  position: relative;
  width: 700rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  display: inline-flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height:98%;
  /* justify-content: space-between */
}

.calendar-body-container>view{
  /* position: absolute; */
  /* flex: 0 0 14.3%; */
  font-size: 28rpx;
  width: 100rpx;
  margin: 0;
  color: #878787;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 70rpx;
  font-weight: 500;
}

.text_blue{
  color: #3D5DC6;
}

.month_color{
  color: #D26282;
}

.month-container{
  width: 700rpx !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
}

.sign-icon{
  position: absolute;
  height:50rpx;
  width: 50rpx;
  display: none;
}

.sign-icon-show{
  display: block
}