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

        
            
                
            
            
                
                    
                        {{year}}年{{month}}月
                    
                

                
                    
                        {{item}}
                    
                

                

                    
                        
                            
                                {{item.dateNum}}
                            
                        
                    
           
     

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