小程序日历

**

小程序日历

**
最近在开发项目中遇到了写日历这个功能，然后根据需求写了一下。具体代码如下。有需要的粘过去就可以直接用。 我开发的是淘宝小程序，跟微信小程序语法很类似，微信小程序的话，可以参考文档，把有点语法改一下就可以了。

<view class="calendar" style="height:{{calendarH}}rpx;background:url(/images/signIn/images/red-calendar.png) no-repeat;background-size:100% 100%;">
      <view class="selectDate">
          <view class="goleft" onTap="prevMonth"></view>
          <view class="date-wrap">
            {{year}}年{{month}}月
          </view>
          <view class="goright" onTap="nextMonth"></view>
      </view>
      <view class="week">
          <view a:for="{{weekArr}}" a:for-index="index" a:for-item="item" a:key="key" >{{item}}</view>
      </view>
      <view class="date">
          <!-- 循环的是展开的天数 还是 折叠的天数 -->
          <block a:for="{{calendarH==593?dateArr:nowWeekDay}}" a:for-index="index" a:for-item="item" a:key="key">
                  <!-- 展开时的样式 -->
                  <view a:if="{{calendarH==593?true:false}}" style="{{index ==0?'margin-left:'+ (param+37 )*firstDay +'rpx;':''}}width:85rpx;height:61rpx;line-height:61rpx;position:relative;border:1rpx solid #eee;overflow: hidden;" class="{{index+1==day?'today':''}}">
                      <view class="day">
                          <image mode="scaleToFill" a:if="{{checkIn.includes(item<10?('0'+item):item+'')}}" src="/images/signIn/images/prize_04.png"/>
                          <view a:if="{{louSignArr.includes(item+'')}}" onTap="handleToRepair" class="repair">补签</view>
                          {{item}}
                      </view>
                  </view>
                  <!-- 折叠后的样式 -->
                  <view a:if="{{calendarH==593?false:true}}" style="width:85rpx;height:61rpx;line-height:61rpx;text-align: center;border:1rpx solid #eee">
                      <view class="day">
                          <image mode="scaleToFill" a:if="{{checkIn.includes(item<10?('0'+item):item+'')}}" src="/images/signIn/images/prize_04.png"/>
                          <view a:if="{{louSignArr.includes(item+'')}}" onTap="handleToRepair" class="repair">补签</view>
                          {{item}}
                      </view>
                  </view>
                  <!-- 控制折叠 展开的 -->
                  <view class="fold" onTap="handleFold">
                      {{calendarH==593?"折叠":"展开"}}
                      <image mode="scaleToFill" src="/images/signIn/images/xia.png"/>
                  </view>
              <!-- </block> -->
          </block>
      </view>

.calendar{
  width:648rpx;
  margin-left:52rpx;
  border-radius: 9rpx;
  margin-top:409rpx;
  position: relative;
  overflow: hidden;
}
.selectDate{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height:90rpx;
  font-size: 30rpx;
  font-weight: bold;
  color:#ff5754;
  margin: 0 auto;
}
.week{
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20rpx;
  color:#ff5754;
  margin-bottom:15rpx;
}
.week view{
  width:170rpx;
  text-align: center;
}
.date{
   width:100%;
   box-sizing: border-box;
   padding-left:20rpx;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
}
.goleft{
  background:url(/images/img_left.png);
  background-size: 100% 100%;
  width: 16rpx;
  height: 20rpx;
}
.goright{
  background:url(/images/img_right.png);
  background-size: 100% 100%;
  width: 16rpx;
  height: 20rpx;
}
.today{
  color:#ff5754;
}
.day{
  float:right;
  margin-right:10rpx;
  position: relative;
}
.day image{
  width:41rpx;
  height:36rpx;
  position: absolute;
  right:30rpx;
  bottom:0;
}
.day .repair{
  white-space: nowrap;
  font-size:23rpx;
  color:#ff8400;
  position: absolute;
  right:28rpx;
  top:16rpx;
}
.fold{
  position: absolute;
  left:42%;
  bottom:16rpx;
  font-size: 23rpx;
  color:#ff7158;
  background:#ffddd2;
  padding:9rpx 20rpx;
  border-radius: 30rpx;
}
.fold image{
  width:18rpx;
  height:10rpx;
  margin-left:6rpx;
}

我的需求里面有折叠后，显示当前星期的天数。可根据具体需求来修改部分代码。

data: {
    // 日历数据开始
    year:'',
    month:'',
    day:'',
    weekArr: ['日', '一', '二', '三', '四', '五','六'],
    dateArr:[],
    firstDay:'',
    lastDay:'',
    nowWeekDay:[],//当前日期所在行的 所有日期
    param:49.42,//日历盒子高/12的数据  用来控制所有天数盒子的大小
    calendarH:593,//日历动态高度
    checkIn:[],//处理过的已签到的日期  单纯的数据,用于页面判断日历的图标
    // 日历数据结束
},
onLoad(options) {
    this.getDate();//处理日历
    this.setDate();//处理日历
},
handleFold(){//折叠
    /* 处理获取当前日期的一周号数 start */ 
    var now = new Date(); 
    var nowTime = now.getTime() ; 
    var day = now.getDay() || 7;
    var oneDayLong = 24*60*60*1000 ; 

    var MondayTime = nowTime - (day-1)*oneDayLong;
    var TuesdayTime = nowTime - (day-2)*oneDayLong;
    var WednesdayTime = nowTime - (day-3)*oneDayLong;
    var ThursdayTime = nowTime - (day-4)*oneDayLong;
    var FridayTime = nowTime - (day-5)*oneDayLong;
    var SaturdayTime = nowTime - (day-6)*oneDayLong;
    var SundayTime =  nowTime + (7-day)*oneDayLong; 

    var sunday = new Date(SundayTime).getDate()-7;
    var monday = new Date(MondayTime).getDate();
    var tuesday = new Date(TuesdayTime).getDate();
    var wednesday = new Date(WednesdayTime).getDate();
    var thursday = new Date(ThursdayTime).getDate();
    var friday = new Date(FridayTime).getDate();
    var saturday = new Date(SaturdayTime).getDate();

    var nowWeekDay=[sunday,monday,tuesday,wednesday,thursday,friday,saturday]
    this.setData({
      nowWeekDay:nowWeekDay
    })
    /* 处理获取当前日期的一周号数 end */ 

    if(this.data.calendarH == 593){
      this.setData({
        calendarH:278
      })
    }else{
      this.setData({
        calendarH:593
      })
    }
  },
  getDate: function () { //获取当月日期
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth();
    var months = month + 1;
    this.data.year = year;
    this.data.month = months;
    this.data.day = mydate.getDate();
    var fist = new Date(year, month, 1);
    this.data.firstDay = fist.getDay();
    var last = new Date(year, months, 0); 
    this.data.lastDay = last.getDate();
 
    this.setData({
      year: this.data.year,
      month: this.data.month,
      day: this.data.day,
      firstDay: this.data.firstDay,
      lastDay: this.data.lastDay
    })
  },
  setDate: function () {
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    this.setData({
      dateArr: this.data.dateArr,
      firstDay: this.data.firstDay
    })
  },
  prevMonth:function(){ //上一月
    var months="";
    var years="";
    if(this.data.month ==1){
      years=this.data.year-1
      this.data.month=12;
      months=this.data.month;
    }else{
      years=this.data.year;
      months = this.data.month - 1;
    }
    var first = new Date(years, months-1, 1);
    this.data.firstDay = first.getDay();
    var last = new Date(years, months, 0);
    this.data.lastDay = last.getDate();
    
    this.setData({
      month: months,
      year:years,
      firstDay: this.data.firstDay,
      lastDay: this.data.lastDay
    })
 
    this.data.dateArr = [];
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    this.setData({
      dateArr: this.data.dateArr
    })
  },
  nextMonth:function(){ //下一月
    var months="";
    var years="";
    if(this.data.month== 12){
      this.data.month=0;
      months = this.data.month;
      years = this.data.year+1;
    }else{
      months = this.data.month+1;
      years = this.data.year;
    }
    var months = this.data.month + 1;
    var first = new Date(years, months-1,1);
    this.data.firstDay= first.getDay();
    var last = new Date(years,months,0);
    this.data.lastDay= last.getDate();
    this.setData({
      month: months,
      year:years,
      firstDay:this.data.firstDay,
      lastDay:this.data.lastDay
    })
    
    this.data.dateArr = [];
    for (var i = 1; i < this.data.lastDay + 1; i++) {
      this.data.dateArr.push(i);
    }
    this.setData({
      dateArr: this.data.dateArr
    })
  },