js实现签到日历

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

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

查看更多关于js实现签到日历的详细内容...