小程序自定义签到日历

wxml部分

<view class='wrap'>
    <view>
      <view class='date-show'>
        <view class='lt-arrow' bindtap='lastMonth'>
          <image src='｛｛左方向箭头｝｝' mode='aspectFit'></image>
        </view>
        签到日历({{month}}月)
        <view class='rt-arrow' bindtap='nextMonth'>
          <image src='｛｛右方向箭头｝｝' mode='aspectFit'></image>
        </view>
      </view>
    </view>
    <!-- 星期展示 -->
    <view class='header'>
      <view wx:for='{{date}}' wx:key="index" class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
        <view></view>
      </view>
    </view>
    <!-- 日期展示 -->
    <view class='date-box'>
      <view wx:for='{{dateArr}}' wx:key="index" class='{{isSign.is(isToday,item.isToday).indexOf ? "nowDay" : ""}}' data-date='{{item.isToday}}'>
        <view class='date-head'>
          <view>{{item.dateNum}}</view>
        </view>
      </view>
    </view>
  </view>

wxss部分

.wrap {
  background: #fff;
  margin-top: 40rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}

.date-show {
  position: relative;
  width: 250rpx;
  font-family: PingFang-SC-Regular;
  font-size: 29rpx;
  color: #666666;
  text-align: center;
  margin: 35rpx auto 10rpx;
}

.lt-arrow, .rt-arrow {
  position: absolute;
  top: 1rpx;
  width: 60rpx;
  height: 60rpx;
  padding-right: 0.6rem;
}

.lt-arrow image, .rt-arrow image {
  width: 16rpx;
  height: 24rpx;
}

.lt-arrow {
  left: -220rpx;
}

.rt-arrow {
  right: -220rpx;
}

.header {
  margin-top: 36rpx;
  font-size: 0;
  border-top: 1rpx solid #eaeaea;
}

.header>view {
  display: inline-block;
  width: 14.285%;
  color: #333;
  font-size: 30rpx;
  text-align: center;
  padding: 39rpx 0;
}

.weekMark {
  position: relative;
}

.weekMark view {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.date-box {
  font-size: 0;
  padding: 5rpx 0;
  -webkit-overflow-scrolling: touch;
}

.date-box>view {
  position: relative;
  display: inline-block;
  width: 14.285%;
  color: #020202;
  font-size: 30rpx;
  text-align: center;
  vertical-align: middle;
  margin: 10rpx 0;
}

.date-head {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}

.nowDay .date-head {
  width: 60rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background: 想要的颜色;
  background-size: 60rpx 60rpx;
  margin: 0 auto;
}

.date-weight {
  font-size: 22rpx;
  padding: 15rpx 0;
}

.nowDay .date-weight {
  color: #22a7f6;
}

.one {
  position: absolute;
  bottom: 0;
  right: 5rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: red;
}

.two {
  position: absolute;
  bottom: 30rpx;
  right: 5rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: blue;
}

js部分 

  data: {
    //初始化年月日
    year: 0,
    month: 0, 
    date: ['日', '一', '二', '三', '四', '五', '六'],
    dateArr: [],
    isToday: [],
    isTodayWeek: false,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.init()
    this.getSignData()
  },

  init : function(){
    //获取当前日期
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    this.dateInit();
    this.setData({
      year: year,
      month: month,
    })
  },
  
  //获取签到列表
  getSignData: function() {
    var dataArray = [{"sign_time":"1587367386"},{"sign_time":"1586937453"},{"sign_time":"1585704891"},{"sign_time":"1585623655"},{"sign_time":"1585291675"},{"sign_time":"1585014197"},{"sign_time":"1584947763"},{"sign_time":"1584947730"},{"sign_time":"1584947713"},{"sign_time":"1582792567"},{"sign_time":"1579404181"},{"sign_time":"1579250184"},{"sign_time":"1579056258"},{"sign_time":"1578877416"},{"sign_time":"1578619749"},{"sign_time":"1578533413"},{"sign_time":"1578479831"},{"sign_time":"1578360671"},{"sign_time":"1578275664"},{"sign_time":"1578032758"},{"sign_time":"1577934870"},{"sign_time":"1577754441"},{"sign_time":"1577670165"},{"sign_time":"1577436593"},{"sign_time":"1577339322"},{"sign_time":"1577083170"},{"sign_time":"1576567052"},{"sign_time":"1576307821"},{"sign_time":"1576221412"},{"sign_time":"1576135002"},{"sign_time":"1576048591"},{"sign_time":"1575962178"},{"sign_time":"1575875764"},{"sign_time":"1575788488"},{"sign_time":"1575705872"}]
let array = new Array()
    for(var i=0;i<dataArray.length;i++){
         array.push(time.formatTime2Date(dataArray[i].sign_time))
    }
this.setData({
        isToday : array
      })
  },
   
dateInit: function(setYear, setMonth) {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let dateArr = []; //需要遍历的日历数组数据
    let arrLen = 0; //dateArr的数组长度
    let now = setYear ? new Date(setYear, setMonth) : new Date();
    let year = setYear || now.getFullYear();
    let nextYear = 0;
    let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
    let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
    let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期几
    let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
    let obj = {};
    let num = 0;
    if (month + 1 > 11) {
      nextYear = year + 1;
      dayNums = new Date(nextYear, nextMonth, 0).getDate();
    }
    arrLen = startWeek + dayNums;
    //这里月份从 0 开始 所以+1
    month+=1
    //这里月份本地时间戳转换日期为01月所以判断一下前面加个0 和具体天数一样的操作
    if(month<=9){
      month = '0'+month
    }
    for (let i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        if(num <= 9){
          num = '0' + num
        }
        obj = {
          isToday:  year +'年'+ month +'月' + num +'日',
          dateNum: num,
          weight: 5
        }
      } else {
        obj = {};
      }
      dateArr[i] = obj;
    }
    this.setData({
      dateArr: dateArr
    })

    let nowDate = new Date();
    let nowYear = nowDate.getFullYear();
    let nowMonth = nowDate.getMonth() + 1;
    let nowWeek = nowDate.getDay();
    let getYear = setYear || nowYear;
    let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

    if (nowYear == getYear && nowMonth == getMonth) {
      this.setData({
        isTodayWeek: true,
        todayIndex: nowWeek
      })
    } else {
      this.setData({
        isTodayWeek: false,
        todayIndex: -1
      })
    }
  },

  lastMonth: function() {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.dateInit(year, month);
  },

  nextMonth: function() {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.dateInit(year, month);
  },

js中引用的time文件部分 以及 xml中引用的文件

<wxs src="../../../utils/sign.wxs" module="isSign"/>

 

//这里的time是文件需要外部引用

function formatTime2Date(timeStamp) {

  return formatTime2DateNew(timeStamp, 1)

}

 

/**

 * 按指定类型格式化时间戳为日期

 */

function formatTime2DateNew(timeStamp, type) {

  if (timeStamp == undefined || timeStamp <= 0) {

    timeStamp = getTimeStamp()

  }

  var fullTimeStamp = timeStamp * 1000

  var newDate = new Date(fullTimeStamp)

 

  var year = newDate.getFullYear()

  var month = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1)

  var day = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate()

  var hour = newDate.getHours()

  var min = newDate.getMinutes()

  var second = newDate.getSeconds()

  if (type == 1) {

    return year + "年" + month + "月" + day + "日"

  } 

}

 

//wxml中引用的文件

//在wxml里面引用 可以使用indexOf

function sign(arr, arg) {

  var result = {

    indexOf: false,

    toString: ''

  }

  result.indexOf = arr.indexOf(arg) > -1;

  result.toString = arr.join(",");

  return result;

}

 

module.exports.is = sign