博客

微信小程序简单的日历组件

代码：

<!--日历组件-->
<view class='cld'>
  <view class="cld-top">
  <!-- 年月区域 -->
   <view class="mData">
     <view class="detail">
      <van-icon name="arrow-left" bindtap='previousMonth'/>
        {{year}}年{{month}}月
        <van-icon name="arrow" bindtap='nextMonth'/>
     </view>
   </view>
   <!-- 星期显示区域 -->
   <view class="dayData">
    <text wx:for="{{dayData}}" wx:key="index">{{item}}</text>
   </view>
  </view>
  <!-- 日期显示区域 -->
  <view class="cld-bottom">
   <text wx:for='{{slotArr}}' wx:key='index'>{{item.text}}
   <text class='round' style='background: {{item.bgcolor}};'></text>
   </text>
  </view>
</view>

/* components/calendar/calendar.wxss */
view{
  box-sizing: border-box;
}
.cld{
  height:100%;
  background:#fff;
}


.cld-top{
  height:130rpx;
  font-size:26rpx;
  padding:25rpx 10rpx 10rpx 10rpx;
  box-shadow:0 3px 3px -1px #ccc;
}
.mData{
  text-align: center;
  height:43rpx;
  color:black;
}
.dayData{
  padding-top:16rpx;
  height:calc(100% - 43rpx);
}
.dayData text{
  display:inline-block;
  width:13%;
  margin-left:1.5%;
  text-align: center;
}
.dayData text:nth-child(1){
  margin-left:0;
}



.cld-bottom{
  height:calc(100% - 130rpx);
  padding:10rpx;
  padding-top:0;
  font-size:29rpx;
}
.cld-bottom text{
  position: relative;
  display: inline-block;
  text-align: center;
  width:13%;
  margin-left:1.5%;
  margin-top:44rpx;
}
.cld-bottom text{
  position: relative;
  display: inline-block;
  text-align: center;
  width:13%;
  margin-left:1.5%;
  margin-top:44rpx;
}
.cld-bottom .round{
  position: absolute;
  display: inline-block;
  width: 14rpx;
  border-radius:50%;
  bottom: -20rpx;
  left:50%;
  margin-left: -7rpx;
  height:14rpx;
}
.cld-bottom text:nth-child(7n-6){
  margin-left:0;
}

// components/calendar/calendar.js
Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initYearMonth()
      this.initSloatArr()
      this.getYMDays(this.data.year,this.data.month)
      this.getNowDay(this.data.year,this.data.month,1)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    dayData:['日','一','二','三','四','五','六',],
    year:'',  //年份
    month:'',  //月份
    allDays:[], //当前总共多少天,
    firstDay:'', //当月第一天星期几
    slotArr:[],  //占位数组(元素35个),
    Color1:[1,2,3],   //#44e036 ,展示圆点 
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 初始化占位数组
    initSloatArr(){
      let copyArr=[]
      for(let i=0;i<35;i++){
        copyArr.push(
          {
            text:''
          }
        )
      }
      this.setData({
        slotArr:copyArr
      })
    },
    // 初始化年月
    initYearMonth(){
      this.setData({
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1
      })
    },
    previousMonth(){
      if(this.data.month==1){
        this.setData({
          month:12,
          year:this.data.year-1
        })
      }else{
        this.setData({
          month:this.data.month-1
        })
      }
      this.initSloatArr()
      this.getYMDays(this.data.year,this.data.month)
      this.getNowDay(this.data.year,this.data.month,1)
    },
    nextMonth(){
      if(this.data.month==12){
        this.setData({
          month:1,
          year:this.data.year+1
        })
      }else{
        this.setData({
          month:this.data.month+1
        })
      }
      this.initSloatArr()
      this.getYMDays(this.data.year,this.data.month)
      this.getNowDay(this.data.year,this.data.month,1)
    },
    //根据年月获取总共多少天
    getYMDays(year,month){
      var newDate = new Date(year,month,0);
      let allFlag=newDate.getDate()
      let allData=[]
      for(let i=1;i<=allFlag;i++){
        allData.push(i)
      }
      this.setData({
        allDays:allData
      })
    },
    //根据年月日判断是星期几&修改占位数组内容显示日历
    getNowDay(y,m,d){
      let newDate=`${y}-${m}-${d}`
      this.setData({
        firstDay:new Date(newDate).getDay()
      })
      //改占位数组--->当前月第一天为周几
      this.setData({
        [`slotArr[${this.data.firstDay}].text`]:1
      })
      //递增占位数组
      this.data.slotArr.map((item,index)=>{
          if(this.data.slotArr[index].text){
            this.setData({
              [`slotArr[${index+1}].text`]:this.data.slotArr[index].text+1
            })
          }
      })
      //删除占位数组中多出的日子
      let zArr=JSON.parse(JSON.stringify(this.data.slotArr))
      for(let i=0;i<this.data.slotArr.length;i++){
        if(this.data.slotArr[i].text>this.data.allDays.length){
          zArr.splice(i,6)
        }
      }
      this.setData({
          slotArr:zArr
      })
       //设置要渲染的圆点
      //  Color1:[1,2,3],   //#44e036 ,展示圆点 
     for(let i=0;i<this.data.Color1.length;i++){
      for(let p=0;p<this.data.slotArr.length;p++){
          if(this.data.Color1[i]==this.data.slotArr[p].text){
            this.setData({
              [`slotArr[${p}].bgcolor`]:'#44e036'
            })
            break
          }
      }
     }
    }
  }
})