效果图



js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 日历
    arr: [],
    sysW: 92,
    marLet:'',//左边边距
    weekArr: ['日', '一', '二', '三', '四', '五', '六'],
    monthIndex:'',
    months:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月 '],
    happyList: ['4',"5","11"],//xd
    angryList:['19','12','18'],//sq，
    sadList:['26','25'],//伤心
    heartList: ['1','2','3'],//心动
    paseList: ['14','18','20'],//平静
    chosedMonth:'',//当前选中的月份
    url: "",
  
  },


  
  onShow: function () {
     
    var date = new Date();
    this.getTime(date);//获取时间
    this.setData({
      chosedMonth:date
    })


  },
  getTime(date){
    this.dataTime(date);
    //先清空数组，根据得到今月的最后一天日期遍历 得到所有日期
    if (this.data.arr) {
        this.data.arr = [];
    }
    for (var i = 0; i < this.data.lastDay; i++) {
        var obj = {};
        obj.day = i + 1;
        obj.status=0//无状态
        obj.chosed=false;//选中的状态为false  当true之后 显示选中的边框
        this.data.arr.push(obj);
        this.data.happyList.forEach(item=>{
            if(this.data.arr[i].day==item){
              this.data.arr[i].status = 1//已经配送完毕的
            }
        })
        this.data.angryList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].status = 2//等待配送完毕的
          }
        })
        this.data.sadList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].status = 3//暂停配送完毕的
          }
        })
        this.data.heartList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].status = 4//暂停配送完毕的
          }
        })
        this.data.paseList.forEach(item=>{
          if(this.data.arr[i].day==item){
            this.data.arr[i].status = 5//暂停配送完毕的
          }
        })
    }
    this.setData({
        marLet: this.data.firstDay,
        arr: this.data.arr,
        monthIndex: this.data.monthIndex,
        year:this.data.year
    });
  },
  //选择某一天
  choseOneDay(e){
    //设置选中的边框效果
    let day=e.currentTarget.dataset.day
    this.data.arr.forEach(item=>{
      if(item.day==day){
        item.chosed=true
      }else{
        item.chosed=false
      }
    })
    //根据日期 进行了数据的查询
    this.setData({
      arr:this.data.arr
    })


  },
  //上个月
  toLastMon(){
    let date=this.data.chosedMonth;
    date.setMonth(date.getMonth()-1);
    console.log(date)
    this.getTime(date)
    this.setData({
        chosedMonth:date
    })
  },
  //下个月
  toNextMon(){
    let date=this.data.chosedMonth;
    date.setMonth(date.getMonth()+1);
    this.getTime(date)
    this.setData({
        chosedMonth:date
    })
  },
  //获取日历相关参数
  dataTime: function (date) {
    //   var date = new Date('2021-7-2');
      var year = date.getFullYear();
    
      var month = date.getMonth();  //0（一月） 到 11（十二月） 
      var months = date.getMonth() + 1;//这个是当前的月份
      
      this.data.year=year //当前的年份
      this.data.monthIndex=month;//当前月份的索引
      this.data.getDate = date.getDate();//获取当前的日期 8号


      var d = new Date(year, months, 0);//Wed Jun 30 2021 00:00:00 GMT+0800 (中国标准时间)  2021年6月30日 周三
      this.data.lastDay = d.getDate();//这是当前月份的所有天数 30


    
      let firstDay = new Date(year, month, 1);//Tue Jun 01 2021 00:00:00 GMT+0800 (中国标准时间)
      this.data.firstDay = firstDay.getDay();// 第一天开始前的位置
  },



  
})

wxml

<view style="padding: 32rpx 40rpx 14rpx 40rpx;">
  <view class="cale_month flex-row j_b">
  <view>{{year}}年{{months[monthIndex]}}</view>
  <view class="flexBox2">
    <view catchtap="toLastMon">
      <image src="/img/de_icon3.png" class="cale_img"></image>
    </view>
    <view catchtap="toNextMon">
      <image src="/img/de_icon2.png" class="cale_img"></image>
    </view>
  </view>
</view></view>
<view class="calendar">
  <view class="top_bg">


    <view class="cale_week flex-row j_b ">
      <block wx:for="{{weekArr}}" wx:key="index">
        <view>{{item}}</view>
      </block>
    </view>
  </view>


  <view class='box1' style='width: {{ sysW * 7 }}rpx'>
    <block wx:for='{{ arr }}' wx:key="index">
     
      <view class="isrela flex-column {{item.chosed?'chosed':''}}" catchtap="choseOneDay" data-day="{{item.day}}" style='width: {{ sysW }}rpx;margin-left:{{ index==0?sysW * marLet:"" }}rpx;' key="index">
      


        <view wx:if="{{item.status==0}}" class="flexBox">
          <image src="{{url}}/assets/img/target/默认.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>


        <view wx:if="{{item.status==1}}" class='flexBox'>
          <image src="{{url}}/assets/img/target/开心.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>


        <view wx:if="{{item.status==2}}" class='flexBox'>
          <image src="{{url}}/assets/img/target/生气.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>


        <view wx:if="{{item.status==3}}" class='flexBox'>
          <image src="{{url}}/assets/img/target/丧.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>


        <view wx:if="{{item.status==4}}" class='flexBox'>
          <image src="{{url}}/assets/img/target/心动.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>


        <view wx:if="{{item.status==5}}" class='flexBox'>
          <image src="{{url}}/assets/img/target/平静.png" class="book_img"></image>
          <view class="dayStyle">{{ item.day }}</view>
        </view>
      </view>
    </block>
  </view>
</view>