Page({
    /**
     * 页面的初始数据
     */
    data: {
     calendar:[],
     width:0,
     currentIndex:0,
     currentTime: 0,
     timeArr: [
         { "time": "09:00-09:30", "status": "约满" }, 
         { "time": "09:50-10:20", "status": "约满" }, 
         { "time": "10:40-11:10", "status": "约满" }, 
         { "time": "11:30-12:00", "status": "约满" }, 
         { "time": "14:00-14:30", "status": "约满" }, 
         { "time": "14:30-15:30", "status": "约满" }, 
         { "time": "16:00-16:30", "status": "约满" }, 
         { "time": "17:00-17:30", "status": "约满" } 
        
         ]  
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
     var that=this;
     function getThisMonthDays(year, month) {
      return new Date(year, month, 0).getDate();
     }
    // 计算每月第一天是星期几
    //  function getFirstDayOfWeek(year, month) {
    //   return new Date(Date.UTC(year, month - 1, 1)).getDay();
    //  }
    //  //获取当前是星期几
    //  function getcurrdDayOfWeek(){
    //   var myDate = new Date();

     
    //   var days = myDate.getDay();
    //   return days;
       
    //  }

   function getDateDayOfWeek(odate){
    
       var week = odate.getDay();  
       var str="";
       switch (week) {  
        case 0 :  
                str += "日";  
                break;  
        case 1 :  
                str += "一";  
                break;  
        case 2 :  
                str += "二";  
                break;  
        case 3 :  
                str += "三";  
                break;  
        case 4 :  
                str += "四";  
                break;  
        case 5 :  
                str += "五";  
                break;  
        case 6 :  
                str += "六";  
                break;  
         }  
         return str;
      
    }
     const date = new Date();
     const cur_year = date.getFullYear();
     const cur_month = date.getMonth() + 1;
     const cur_date=date.getDate();
     //利用构造函数创建对象
     function calendar(datetag){
      var currdate=new Date();
      currdate=currdate.setDate(currdate.getDate()+datetag);
      currdate=new Date(currdate);
      var tempdate=currdate.getDate();
      this.date=currdate.getFullYear()+\'-\'+(currdate.getMonth() + 1)+\'-\'+tempdate;
      var cweek=getDateDayOfWeek(currdate);
      console.log(tempdate+":"+datetag)
      if(tempdate==cur_date){
       this.week = "今天";
      }else if(tempdate==cur_date+1){
       this.week = "明天";
      }else{
       
        this.week = \'星期\' + cweek;
    }
 
     }
     for(var i=0;i<7;i++){
       var tempxq=new calendar(i);
       that.data.calendar[i] = tempxq; 
    
    }
    that.data.calendar = that.data.calendar.filter(item =>item.week!=\'星期六\'&&item.week!=\'星期日\');
     that.setData({
      calendar: that.data.calendar
     })
     //设置scroll-view的子容器的宽度
     that.setData({
      width: 186 * parseInt(that.data.calendar.length - cur_date <= 5 ? that.data.calendar.length : 5)
     })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
    },
    select:function(event){
     //为上半部分的点击事件
     this.setData({
      currentIndex: event.currentTarget.dataset.index
     })
     console.log(event.currentTarget.dataset.date)
    },
    selectTime:function(event){
     //为下半部分的点击事件
     this.setData({
      currentTime: event.currentTarget.dataset.tindex
     })
      console.log(event.currentTarget.dataset.time)
    }
   })

scroll-view{
    height: 128rpx;
   
    width: 100%;
   }
   scroll-view .list{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
     width: 1302rpx; 
   }
   scroll-view .listItem{
    text-align: center;
    width: 186rpx;
    height: 128rpx;
    background-color: #f1f2f6;
    padding-top: 30rpx;
    box-sizing: border-box;
    /* float: left; */
    display: inline-block;
   }
   scroll-view .listItem text{
    display: block;
   }
   scroll-view .listItem .name{
    font-size: 30rpx;
   }
   scroll-view .listItem .date{
    font-size: 30rpx;
   }
   scroll-view .current{
    background-color: #76aef8;
   
   }
   scroll-view .current text{
    color: #fff;
   }
   .time{
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    margin-top: 30rpx;
   }
   .time .listItem{
    width: 50%;
    height: 200rpx;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 35rpx;
    border: 1px solid #b9c1c8;
   }
   .time .listItem text{
    display: block;
    font-size: 30rpx;
   }
   .time .current{
    border: 1px solid #76aef8;
   }
   .time .current text{
    color: #76aef8;
   }
   .operate button{
    width:300rpx;
    height: 88rpx;
    background-color: #fff;
   }
   .operate .del{
   
     color: #e54449; 
   }
   .operate button::after{
    border: 2px solid #e54449;
   }
   .operate{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
   }
   .operate button:nth-child(2):after{
    border: 2px solid #e54449;
   }
   .operate .save{
    color: #fff;
    background-color: #e54449; 
   
   }
   .operate{
    width: 100%;
    padding: 30rpx 0;
    background-color: #fff;
    position: fixed;
    bottom: 0;
   }

<view class=\'containt\'>
 <scroll-view class="scroll-view_H" scroll-x>
  <view class=\'list\' style=\'width:{{ width }}rpx\'>
   <view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class=\'listItem {{index==currentIndex? "current":""}}\' wx:key=\'\' data-date="{{ item.date}}">
    <text class=\'name\'>{{ item.week }}</text>
    <text class=\'date\'>{{ item.date }}</text>
   </view>
  </view>
 </scroll-view>
 <view class=\'time\'>
  <view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-Tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap=\'selectTime\' class=\'listItem {{ currentTime==timeIndex? "current":"" }}\' wx:key=\'\'>
   <text>{{ timeItem.time }}</text>
   <text>{{ timeItem.status }}</text>
  </view>
 </view>
 <view class=\'operate\'>
  <button class=\'del\'>取消</button>
  <button class=\'save\'>选择</button>
 </view>
</view>