本文实例为大家分享了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 && 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 (day > 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;
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue如何实现筛选功能？思路分析及代码详解

  vue如何实现筛选功能？大家在一些网站或者软件上，应该都见过筛选功能，例如先筛选出符合条件的信息再搜索，这样能够提高搜索的准确度，因此这篇就主要仿写teambition软件的筛选功能，给大家介绍一下筛选功能是如何实现的。

• Vue项目怎样用defineCustomElement定义组件

  这篇文章主要为大家介绍了Vue项目怎样用defineCustomElement定义组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• jQuery如何实现元素延迟3秒再消失的效果？

  jQuery如何实现元素延迟3秒再消失的效果？延迟消失的效果其实在很多场景下都能使用，例如弹窗广告。下文给大家分享是一个点击按钮，元素3秒后再消失的示例，代码有一定的参考价值，感兴趣的朋友就继续往下看吧。

• JavaScript中方法和函数的用法一样吗

  方法与对象绑定的，不能单独引用，只能通过对象调用。功能独立，可单独引用。在方法中，this表示该方法所属的对象。在函数中，this代表整体对象。

• 如何设置setStorage和获取getStorage所有值

  目录前言设计设置 setStorage获取 getStorage获取所有值删除 removeStorage清空 clearStorage加密、解密使用完整代码前言很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简