微信小程序实现简单日历效果
本文实例为大家分享了微信小程序实现日历效果的具体代码，供大家参考，具体内容如下
效果:
wxml:
<!-- 日历 -->
<view class="myReport-calendar">
<view class="img">
<image mode="aspectFit" src="/imgs/calendar.png"></image>
</view>
<view class="calendar">
<view class="selectDate">
<view class="date-wrap">
{{year}}年{{month}}月
</view>
</view>
<view class="week">
<block wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key">
<view>{{item}}</view>
</block>
</view>
<view class="date-box">
<block wx:for='{{dateArr}}' wx:key='key'>
<view class='{{theDay == item.isToday ? "nowDay" : ""}}' data-key='{{item.isToday}}'>
<view class='date-head' data-year='{{year}}' data-month='{{month}}'
data-datenum='{{item.dateNum}}'>
<view>{{item.dateNum}}</view>
</view>
</view>
</block>
</view>
</view>
</view>
js:
// pages/report/report.js
Page({
/**
* 页面的初始数据
*/
data: {
year: 0,
month: 0,
weekArr: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
isToday: "",
isTodayWeek: false,
todayIndex: 0,
theDay: "",
index: '',
signNum: '', //签到数
},
dateInit: function (setYear, setMonth) {
//全部时间的月份都是按0~11基准，显示月份才+1
let dateArr1 = []; //需要遍历的日历数组数据
let arrLen = 0; //dateArr的数组长度
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
let obj = {};
let num = 0;
if (month + 1 > 11) {
nextYear = year + 1;
dayNums = new Date(nextYear, nextMonth, 0).getDate();
}
arrLen = startWeek + dayNums;
for (let i = 0; i < arrLen; i++) {
if (i >= startWeek) {
num = i - startWeek + 1;
obj = {
isToday: '' + year + (month + 1) + num,
dateNum: num,
weight: 5
}
} else {
obj = {};
}
dateArr1[i] = obj;
}
this.setData({
dateArr: dateArr1
})
let nowDate = new Date();
let nowYear = nowDate.getFullYear();
let nowMonth = nowDate.getMonth() + 1;
let nowWeek = nowDate.getDay();
let getYear = setYear || nowYear;
let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
if (nowYear == getYear && nowMonth == getMonth) {
this.setData({
isTodayWeek: true,
todayIndex: nowWeek
})
} else {
this.setData({
isTodayWeek: false,
todayIndex: -1
})
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
this.dateInit();
this.setData({
year: year,
month: month,
isToday: '' + year + month + now.getDate(),
theDay: '' + year + month + now.getDate()
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss:
/* 日历 */
.myReport-calendar {
width: 100%;
height: 700rpx;
margin-top: 27rpx;
margin-bottom: 40rpx;
position: relative;
}
.calendar {
position: absolute;
top: 88rpx;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.today .day {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
.today text {
display: block;
width: 60rpx;
text-align: center;
line-height: 60rpx;
color: #fff;
background: #00c8be;
border-radius: 100rpx;
}
.selectDate {
padding-bottom: 20rpx;
text-align: center;
}
.date-wrap {
font-size: 32rpx;
font-weight: 600;
color: #232323;
}
.week {
display: flex;
align-items: center;
justify-content: space-around;
padding: 30rpx;
color: #000000;
font-weight: 400;
font-size: 28rpx;
}
.date-box {
font-size: 0;
padding: 0 30rpx 30rpx 30rpx;
margin: 0 auto;
}
.date-box>view {
position: relative;
display: inline-block;
width: 14.285%;
color: #333;
text-align: center;
vertical-align: middle;
padding-bottom: 30rpx;
}
.date-head {
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
}
.nowDay .date-head {
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #00c8be;
margin: 0 auto;
}
.nowDay .date-head:hover {
background: linear-gradient(to bottom right, #009899, #19d6cb);
}
