js实现签到日历

本文实例为大家分享了js实现签到日历的具体代码，供大家参考，具体内容如下wxml代码viewclass=boxMainstyle=height:{{dateList.length35?'805rp...

本文实例为大家分享了js实现签到日历的具体代码，供大家参考，具体内容如下

wXML代码

<view class="boxMain" style="height:{{dateList.length>35?'805rpx':'730rpx'}}">
  <view class="calendarHeader">
    <view>本月已签到<text>{{recordList.length}}</text>天</view>
  </view>
  <view class="calendarChange">
    <view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth-1}}">
      <image mode="widthFix" src="{{static}}left_arrow.png"></image>
    </view>        
    <text>{{chooseYear}}年{{chooseMonth+1}}月</text>
    <view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth+1}}">
      <image mode="widthFix" src="{{static}}right_arrow.png"></image>
    </view>
  </view>
  <view class="calendarContent">
    <view class="calendarWeek">
      <text>日</text>
      <text>一</text>
      <text>二</text>
      <text>三</text>
      <text>四</text>
      <text>五</text>
      <text>六</text>
    </view>
    <view class="calendarDays">
      <view wx:for="{{dateList}}" wx:key="index" wx:for-item="dateItem">
        <view style="color:{{dateItem.type=='current'?'#ffffff':(dateItem.type=='before'?'#979797':(dateItem.type=='selected'?'#FE7458':''))}};background-color:{{ dateItem.type=='current'?'#FE7458':(dateItem.type=='before'?'#F8F8FA':(dateItem.type=='selected'?'#ffdcd5':'')) }}">
          {{dateItem.day}}
        </view>   
      </view>
    </view>
  </view>
</view>

js代码：

const app = getApp()
const http = require('../../config/api.js');
Page({
 data: {
  static: app.data.static,
  recordList: [],
  totalReward: {},
  dateList: [],
  chooseYear: new Date().getFullYear(),
  chooseMonth: new Date().getMonth(),
  currentDay: new Date().getDate(),
  dayNumsByMonth: null
 },
 onLoad() {
  this.initDateList(); //初始化日历
 },
 initDateList: function (e) {
  let that = this;

  let chooseMonth = that.data.chooseMonth;
  let chooseYear = that.data.chooseYear;

  let currentDate = new Date();
  let currentYear = currentDate.getFullYear();
  let currentMonth = currentDate.getMonth();

  if (e) {
   chooseMonth = e.currentTarget.dataset.month;
   if (chooseMonth >= 12) {
    chooseMonth = chooseMonth - 12;
    chooseYear = chooseYear + 1;
   } else if (chooseMonth < 0) {
    chooseMonth = chooseMonth + 12;
    chooseYear = chooseYear - 1;
   } else {
    chooseMonth = chooseMonth;
   }
   let monthCount = (currentYear - chooseYear) * 12 + currentMonth - chooseMonth;
   if (monthCount > 0 &&amphpp; Math.abs(monthCount) > 6) {
    wx.showToast({
     title: '往前最多查看六个月',
     icon: 'none',
     duration: 1500
    })

    return
   } else if (monthCount < 0 && Math.abs(monthCount) > 1) {
    wx.showToast({
     title: '往后最多查看一个月',
     icon: 'none',
     duration: 1500
    })
    return
   }
  }

  that.setData({
   chooseMonth: chooseMonth,
   chooseYear: chooseYear
  })
  var dateList = [];

  let firstDayWeek = new Date(that.data.chooseYear, that.data.chooseMonth, 1).getDay();
  let dayNumsByMonth = new Date(that.data.chooseYear, that.data.chooseMonth + 1, 0).getDate();
  that.setData({
   dayNumsByMonth: dayNumsByMonth
  })

  for (let i = 0; i < 43; i++) {
   let day = i - firstDayWeek + 1;
   if (dajsy > dayNumsByMonth && (i == 35 || i == 42)) {
    that.setData({
     dateList: dateList
    });
    return
   }
   dateList.push({
    'year': '',
    'month': '',
    'day': '',
    'type': '',
   })

   if (day > 0 && day <= dayNumsByMonth) {
    dateList[i].year = that.data.chooseYear;
    dateList[i].month = that.isTen(that.data.chooseMonth + 1);
    dateList[i].day = that.isTen(day);
    if (that.data.chooseYear == currentYear && that.data.chooseMonth == currentMonth) {

     if (day < that.data.currentDay) {
      dateList[i].type = 'before';
     } else if (day > that.data.currentDay) {
      dateList[i].type = 'after';
     } else {
      dateList[i].type = 'current'
     }
    
    } else if (that.data.chooseYear < currentYear || (that.data.chooseYear == currentYear && that.data.chooseMonth < currentMonth)) {
     dateList[i].type = 'before';
    
    } else {
     dateList[i].type = 'after';
    }
   }
  }
 },
 isTen: function (v) {
  return v >= 10 ? v : `0${v}`
 }
});

wxss代码

.boxMain {
 background-color: #fff;
 margin: 36rpx 30rpx 22rpx 30rpx;
 border-radius: 10rpx;
 padding: 0 20rpx;
 display: Flex;
 flex-direction: column;
}

.boxMain .calendarHeader {
 display: flex;
 justify-content: space-between;
 color: #333333;
 font-size: 28rpx;
 margin-top: 40rpx;
 padding: 0 4rpx;
}

.boxMain .calendarHeader view text {
 color: #FE7458;
 padding: 0 6rpx;
}

.boxMain .calendarHeader view:last-child {
 font-size: 24rpx;
}

.boxMain .calendarChange {
 display: flex;
 padding: 0 50rpx;
 align-items: center;
 justify-content: space-between;
 background-color: #F8F8FA;
 border-radius: 25rpx;
 height: 50rpx;
 line-height: 50rpx;
 font-size: 24rpx;
 text-align: center;
 margin: 25rpx 0;
}
.boxMain .calendarChange .calendarChangeLeftRight{
 width: 50rpx;
 height: 50rpx;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.boxMain .calendarChange image{
 width: 12rpx;
 margin: 0 auto;
}
.boxMain .calendarContent .calendarWeek{
 font-size: 26rpx;
 display: flex;  
 justify-content: space-between;
}
.boxMain .calendarContent .calendarWeek text{
 width: 14%;
 height: 40rpx;
 text-align: center;
}
.boxMain .calendarContent .calendarDays{
 font-size: 26rpx;
 display: flex;
 justify-content: space-between;
 flex-wrap:wrap;
 align-items: center;
 margin-top: 47rpx;
}
.boxMain .calendarContent .calendarDays>view{
 width: 14%;
 text-align: center;
 display: block;  
 margin-bottom: 32rpx;
 height: 46rpx;
 line-height: 46rpx;
}
.boxMain .calendarContent .calendarDays>view>view{
 width: 46rpx;
 height: 46rpx;
 margin: 0 auto;
 border-radius: 50%;
}
.boxMain .calendarContent .calendarDays .box{
 margin-top: -10rpx;
}
.boxMain .calendarContent .calendarDays .box image{
 width: 42rpx;
}
.boxMain .calendarContent .calendarDays .box text{
 float: left;
 margin-top: -20rpx;
 padding-left: 4rpx;
 color: #FE7458;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。