微信小程序日历（下拉、收起、点击、小圆点、月份切换）

项目开发中应用的一个小日历功能，写的时候挺复杂但是写出来整理还是觉得挺简单的，整理完以后没有在实际页面中去跑，有问题大家留言或者自己解决(本人样式布局巨好看希望大家喜欢芜湖~)！

html

<view class="ban-all">
    <view class="date_week">
        <image class="left" src="../../images/left1.png" bindtap="leftime" style="margin-left: 25rpx;"></image>
        <view class="date">{{year}}年{{month}}月</view>
        <image class="right" src="../../images/right1.png" bindtap="rightime"></image>
    </view>
    <view class="calendar">
        <view class="calendar-weeks">
            <view style="color: rgba(234, 128, 87, 1);">日</view>
            <view>一</view>
            <view>二</view>
            <view>三</view>
            <view>四</view>
            <view>五</view>
            <view style="color: rgba(234, 128, 87, 1);">六</view>
        </view>
        <view class="calendar-days">
            <view wx:for="{{ lineflag?dayf:days }}" class="{{ item.currmonth ? 'currmonth1' : '' }}">
                <view data-id="{{item.date}}" bindtap="getdaylist" class="{{ item.currmonth ? 'currmonth' : '' }}">
                    {{ item.day }}</view>
                    <!-- 小圆点的添加 -->
                <!-- <view wx:if="{{item.show}}" class="one"></view> -->
            </view>
            <view style="width: 670rpx;height: 36rpx;" bindtap="chanline">
                <image src="{{lineflag?'../../images/morebot.png':'../../images/moretop.png'}}"
                    style="width: 28rpx;height: 36rpx;margin-top: -20rpx;"></image>
            </view>
        </view>
    </view>
</view>

css

Page({

  /**
   * 页面的初始数据
   */
  data: {
    day: [], //日历
    years: '',
    lineflag: true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.calendar()
    this.getDays(this.data.y, this.data.m)
  },

  // 传参
  // 日期加传参
  calendar() {
    let now = new Date();
    let y = now.getFullYear()
    let m = now.getMonth()
    this.setData({
      y,
      m,
    })
  },
  // 日历
  getDays(ye, mo) {
    let that = this
    let date = new Date(ye, mo)
    const y = date.getFullYear()
    const m = date.getMonth()
    let curYear = y
    let curMonth = m
    //获取当前月份天数
    let curDays = new Date(curYear, curMonth + 1, 0).getDate()
    //获取上个月天数
    let preDays = new Date(curYear, curMonth, 0).getDate()
    //这个月第一天星期几
    let monWeek = new Date(curYear, curMonth, 1).getDay()
    //这个月最后一天星期几
    let lastWeek = new Date(curYear, curMonth + 1, 0).getDay()
    let allDays = []
    // 上个月
    let mgo = m
    let mmgo = mgo < 10 ? ('0' + mgo) : mgo;
    for (let i = 0; i < monWeek; i++, preDays--) {
      let obj = {
        currmonth: false,
        day: preDays,
        date: y + '-' + mmgo + '-' + `${preDays < 10 ? ('0' + preDays) : preDays}`
      }
      allDays.unshift(obj)
    }
    // 这个月
    let mone = m + 1
    let mm = mone < 10 ? ('0' + mone) : mone;
    for (let i = 1; i <= curDays; i++) {
      let obj = {
        currmonth: false,
        day: i,
        date: y + '-' + mm + '-' + `${i < 10 ? ('0' + i) : i}`
      }
      // if (i == toDay) {
      //   obj['today'] = true
      // }
      allDays.push(obj)
    }
    // 下个月
    let mdo = m + 2
    let mmdo = mdo < 10 ? ('0' + mdo) : mdo;
    for (let i = 1; i < 7 - lastWeek; i++) {
      let obj = {
        currmonth: false,
        day: i,
        date: y + '-' + mmdo + '-' + `${i < 10 ? ('0' + i) : i}`
      }
      allDays.push(obj)
    }
    that.setData({
      days: allDays,
      dayf: allDays.slice(0,14),
      year: y,
      month: m + 1,
    })
    // 想设置日期下方的小圆点可以在这边循环allDays添加一个控制小圆点的true false，我加的key是show
  },
  // 上个月
  leftime() {
    this.setData({
      m: this.data.m - 1
    })
    this.getDays(this.data.y, this.data.m)
  },
  // 下个月
  rightime() {
    this.setData({
      m: this.data.m + 1
    })
    this.getDays(this.data.y, this.data.m)
  },
  //获取当天   
  getdaylist(e) {
    let that = this
    if (that.data.lineflag) {
      that.data.days.forEach((item, index) => {
        let b = "days[" + index + "].currmonth"
        that.setData({
          [b]: false
        })
      })
      that.data.dayf.forEach((item, index) => {
        let b = "dayf[" + index + "].currmonth"
        that.setData({
          [b]: false
        })
        if (item.date == e.currentTarget.dataset.id) {
          let a = "dayf[" + index + "].currmonth"
          that.setData({
            [a]: true,
          })
        }
      })
    } else {
      that.data.dayf.forEach((item, index) => {
        let b = "dayf[" + index + "].currmonth"
        that.setData({
          [b]: false
        })
      })
      that.data.days.forEach((item, index) => {
        let b = "days[" + index + "].currmonth"
        that.setData({
          [b]: false
        })
        if (item.date == e.currentTarget.dataset.id) {
          let a = "days[" + index + "].currmonth"
          that.setData({
            [a]: true,
          })
        }
      })
    }
  },
  // 改变行数
  chanline(){
    this.setData({
      lineflag:!this.data.lineflag
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

css

/* pagesStudy/Tobecompleted/Tobecompleted.wxss */
page {
    background: rgba(249.9, 249.9, 249.9, 1);
  }
  .ban-all{
    width: 670rpx;
    margin: 20rpx auto;
    border-radius: 16rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(144, 144, 144, 0.1);
  }
  .calendar {
    width: 670rpx;
    margin: 20rpx auto;
    display: flex;
    flex-flow: column nowrap;
  }
  
  .calendar-weeks {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .calendar-weeks view {
    box-sizing: border-box;
    width: 14.28%;
    padding: 5%;
    display: flex;
    justify-content: center;
    font-size: 28rpx;
  font-weight: 500;
  color: rgba(53, 59, 80, 1);
  }
  
  .calendar-days {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .calendar-days view {
    box-sizing: border-box;
    width: 14.28%;
    padding: 4%;
    display: flex;
    justify-content: center;
    font-size: 28rpx;
  font-weight: 500;
  }
  
  .calendar-days view:not(.currmonth) {
    color: rgba(21, 35, 46, 1);
  }
  
  .currmonth1 {
    background: rgba(31, 104, 194, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 25rpx;
    height: 50rpx;
    text-align: center;
    line-height: 5rpx;
    width: 80%;
  }
  
  .currmonth {
    color: rgba(255, 255, 255, 1);
  }
  
  
  .date_week {
    width: 670rpx;
    margin: 20rpx auto;
    height: 86rpx;
    border-bottom: 1rpx solid rgba(247, 247, 247, 1);
    display: flex;
    align-items: center;
    color: rgba(21, 35, 46, 1);
    font-size: 32rpx;
    line-height: 32rpx;
  }
  
  .date_week .date {
    font-size: 32rpx;
    font-weight: 600;
    color: rgba(21, 35, 46, 1);
  }
  
  .right {
    width: 28rpx;
    height: 28rpx;
  }
  
  .left {
    width: 28rpx;
    height: 28rpx;
  }

  /* 小圆点样式 */
  /* .one {
    background: rgba(31, 104, 194, 1);
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    position: relative;
    top: 54rpx;
    left: -8rpx;
  } */