本文实例为大家分享了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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery如何实现执行一次事件，用什么方法？

  有时候我们只需要执行一次事件，那么在jquery中有什么方法能实现这个需求呢？文中主要介绍one()实现元素只执行一次事件的方法，下文有示例供大家参考，感兴趣的朋友可以了解看看。

• 为何用ssr服务端渲染?详解vue的ssr服务端渲染使用

  这篇文章给大家分享的是ssr服务端渲染的相关内容。下文介绍了为什么使用服务器端渲染以及vue的ssr服务端渲染使用，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• 用jQuery实现修改一行的值的代码是什么

  jquery修改某一行值的方法：1、利用eq()方法获取指定行元素对象，语法为“元素对象.eq(行元素的索引)”；2、利用html()方法来修改已获取到指定行元素对象的值，语法为“行元素对象.html(修改后的值)”。

• Vue的安装及环境配置是怎样，如何创建Vue项目

  在开始学习vue的时候,对于新手安装这个环境是真的搞人心态,不友好,下面这篇文章主要给大家介绍了关于Vue安装与环境配置的相关资料,需要的朋友可以参考下

• 用vue实现关闭弹窗后自动刷新的方法是什么

  目录关闭对话框后刷新列表父窗口代码子窗口代码关闭打开的窗口后刷新父页面解决办法关闭对话框后刷新列表有些场景需要实现用户弹窗确定后自动刷新列表，父窗口绑定fevent即可父窗口代码template     div el-button @click=$refs.editform.dialogFormVisible = tr