微信小程序实现简单日历效果

本文实例为大家分享了微信小程序实现日历效果的具体代码，供大家参考，具体内容如下

效果:

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);
}

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

查看更多关于微信小程序实现简单日历效果的详细内容...