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

<!-- 日历 -->
        <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>

// 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 () {

    }
})

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