微信小程序：实现日历功能

一、功能描述

实现日历功能

二、 代码实现

1. index.wxml

 <view class='wrap'>
     <view>
         <view class='date-show'>
             <view class='lt-arrow' bindtap='lastMonth'>
                 <image src='/images/left_arrow.png' mode='aspectFit'></image>
             </view>
             {{year}}年{{month}}月
             <view class='rt-arrow' bindtap='nextMonth'>
                 <image src='/images/right_arrow.png' mode='aspectFit'></image>
             </view>
         </view>
     </view>
     <view class='header'>
         <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view>
     </view>
     <view class='date-box'>
         <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'>
             <view class='date-head'>
                 <view>{{item.dateNum}}</view>
             </view>
             <!-- <view class='date-weight'>{{item.weight}}</view> -->
         </view>
     </view>
 </view>

2. index.js

 Page({
   data: {
     year: 0,
     month: 0,
     date: ['日', '一', '二', '三', '四', '五', '六'],
     dateArr: [],
     isToday: 0,
     isTodayWeek: false,
     todayIndex: 0
   },
   onLoad: 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()
     })
   },
   dateInit: function (setYear, setMonth) {
     //全部时间的月份都是按0~11基准，显示月份才+1
     let dateArr = [];                        //需要遍历的日历数组数据
     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 = {};
       }
       dateArr[i] = obj;
     }
     this.setData({
       dateArr: dateArr
     })

     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
       })
     }
   },
   lastMonth: function () {
     //全部时间的月份都是按0~11基准，显示月份才+1
     let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
     let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
     this.setData({
       year: year,
       month: (month + 1)
     })
     this.dateInit(year, month);
   },
   nextMonth: function () {
     //全部时间的月份都是按0~11基准，显示月份才+1
     let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
     let month = this.data.month > 11 ? 0 : this.data.month;
     this.setData({
       year: year,
       month: (month + 1)
     })
     this.dateInit(year, month);
   }
 })

3. index.wxss

 .date-show{
     position: relative;
     width: 250rpx;
     font-family: PingFang-SC-Regular;
     font-size: 40rpx;
     color: #282828;
     text-align: center;
     margin: 59rpx auto 10rpx;
 }
 .lt-arrow,.rt-arrow{
     position: absolute;
     top: 1rpx;
     width: 60rpx;
     height: 60rpx;
   padding-right: 0.6rem;
 }
 .lt-arrow image,.rt-arrow image{
     width: 40rpx;
     height: 40rpx;
 }
 .lt-arrow{
     left: -110rpx;
     /* transform: rotate(180deg); */
 }
 .rt-arrow{
     right: -100rpx;
 }
 .header{
     font-size: 0;
     padding: 0 24rpx;
 }
 .header>view{
     display: inline-block;
     width: 14.285%;
     color: #333;
     font-size: 30rpx;
     text-align: center;
     border-bottom: 1px solid #D0D0D0;
     padding: 39rpx 0;
 }
 .weekMark{
     position: relative;
 }
 .weekMark view{
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     border-bottom: 1px solid #22A7F6;
 }
 .date-box{
     font-size: 0;
     padding: 10rpx 0;
 }
 .date-box>view{
     position: relative;
     display: inline-block;
     width: 14.285%;
     color: #020202;
     font-size: 40rpx;
     text-align: center;
     vertical-align: middle;
     margin: 15rpx 0;
 }
 .date-head{
     height: 60rpx;
     line-height: 60rpx;
     font-size: 26rpx;
 }
 .nowDay .date-head{
     width: 60rpx;
     border-radius: 50%;
     text-align: center;
     color: #fff;
     background-color: #22A7F6;
     margin: 0 auto;
 }
 .date-weight{
     font-size: 22rpx;
     padding: 15rpx 0;
 }
 .nowDay .date-weight{
     color: #22A7F6;
 }
 .one{
     position: absolute;
     bottom: 0;
     right: 5rpx;
     width: 20rpx;
     height: 20rpx;
     border-radius: 50%;
     background-color: red;
 }
 .two{
     position: absolute;
     bottom: 30rpx;
     right: 5rpx;
     width: 20rpx;
     height: 20rpx;
     border-radius: 50%;
     background-color: blue;
 }