本文实例为大家分享了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.webp"></image>
</view>
<text>{{chooseYear}}年{{chooseMonth+1}}月</text>
<view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth+1}}">
<image mode="widthFix" src="{{static}}right_arrow.webp"></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;
}
