小程序日历

小程序日历

效果图：

视图部分：

<!-- 日历主体 -->
    <view class="calendar">
      <view class="header">
        <view
          v-for="(item,index) in date"
          :key="index"
          :class="(index == todayIndex) && isTodayWeek ? 'weekMark' : ''">
            <view>{{item}}</view>
        </view>
      </view>

      <view class="date-box">
        <block v-for="(item,index) in dateArr" :key="index">
          <view 
            :class="isToday == item.isToday ? 'nowDay1' : isToday<item.isToday ? 'houDay':'qianDay'"
            :style="index%7==0 ?{'color':'#F44747'}:index%7==6?{'color':'#F44747'}:''">
            <view
              class="date-head"
              @click="lookHuoDong(item,$event)"
              :data-year="year"
              :data-month="month"
              :data-datenum="item.dateNum">
              <view :class="clickDay==item.isToday?'aaa':'bbb'">{{item.dateNum}}</view>
            </view>
          </view>
        </block>
      </view>

    </view>

数据绑定部分：

data() {
	    return {
	      year: 0,
	      month: 0,
	      date: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
	      dateArr: [],
	      isToday: 0,
	      isTodayWeek: false,
	      todayIndex: 0
	      ｝
      ｝

逻辑部分：

methods（）｛
	/**
     * 加载日历
     */
    getInitRiLi(){
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate()
      day = day < 10 ? '0'+ day : day
      this.dateInit();
      this.year = year;
      this.month = month;
      this.isToday = "" + year + month + day
      console.log('getInitRiLi年月今天',this.year,this.month,this.isToday);
    },
    /**
     * 初始化日历
     */
    dateInit(setYear, setMonth) {
      //全部时间的月份都是按0~11基准，显示月份才+1
      let dateArr = []; //需要遍历的日历数组数据
      let arrLen = 0; //dateArr的数组长度
      let now = setYear ? new Date(setYear, setMonth) : new Date();
      let year = setYear || now.getFullYear();
      let nextYear = 0;
      let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
      let nextMonth = month + 1 > 11 ? 1 : month + 1;
      let startWeek = new Date(year + "/" + (month + 1) + "/" + 1).getDay(); //目标月1号对应的星期
      let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
      let obj = {};
      let num = 0;
      if (month + 1 > 11) {
        nextYear = year + 1;
        dayNums = new Date(nextYear, nextMonth, 0).getDate();
      }
      arrLen = startWeek + dayNums;
      
      for (let i = 0; i < arrLen; i++) {
        if (i >= startWeek) {
          num = i - startWeek + 1;
          // 日补0
          num = num < 10 ? '0'+num : num 
          obj = {
            isToday: "" + year + (month + 1) + num,
            dateNum: num,
            weight: 5
          };
        } else {
          obj = {};
        }
        dateArr[i] = obj;
      }
      console.log('dateArr',dateArr);
      this.dateArr = dateArr;
      

      let nowDate = new Date();
      let nowYear = nowDate.getFullYear();
      let nowMonth = nowDate.getMonth() + 1;
      let nowWeek = nowDate.getDay();
      let getYear = setYear || nowYear;
      let getMonth = setMonth >= 0 ? setMonth + 1 : nowMonth;
      if (nowYear == getYear && nowMonth == getMonth) {
        this.isTodayWeek = true;
        this.todayIndex = nowWeek;
      } else {
        this.isTodayWeek = false;
        this.todayIndex = -1
      }
      
    },
    /**
     * 上月切换
     */
    lastMonth() {
      //全部时间的月份都是按0~11基准，显示月份才+1
      let year = this.month - 2 < 0 ? this.year - 1 : this.year;
      let month = this.month - 2 < 0 ? 11 : this.month - 2;
      this.year = year;
      this.month = month + 1;
      this.dateInit(year, month);
    },
    /**
     * 下月切换
     */
    nextMonth() {
      //全部时间的月份都是按0~11基准，显示月份才+1
      let year = this.month > 11 ? this.year + 1 : this.year;
      let month = this.month > 11 ? 0 : this.month;
      this.year = year;
      this.month = month + 1;
      this.dateInit(year, month);
    },
｝
	/**
     * 选中日历某一天
     */
    lookHuoDong(item,e) {
      console.log(this.isToday , item.isToday);
      

      if (this.isToday< item.isToday) {
        // 更改日期格式
        let nian = item.isToday.substring(0, 4);
        let yue = item.isToday.substring(4, item.isToday.length-2);
        let ri = item.isToday.substring(item.isToday.length-2, item.isToday.length);
        yue = yue<10?'0'+yue:yue
        this.showTime = nian+'-'+yue+'-'+ri
        console.log('更改日期格式',this.showTime);

        this.getAppointmentPeopleNumByTime()
        
        this.clickDay = e.currentTarget.dataset.year +''+ e.currentTarget.dataset.month +''+ e.currentTarget.dataset.datenum
        // console.log(this.isToday,item.isToday,e);
      }else if (this.isToday == item.isToday){
        wx.showToast({
          title: '不可预约当天时间',
          icon: 'none',
          duration: 1000
        })
      }else{

      }
    }

样式部分：

.calendar_title {
    width: 90%;
    margin-top: 140rpx;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    box-sizing: border-box;
    padding: 25rpx 20%;
    background-color: #fff;
    border-bottom: 1rpx solid #d0d0d0;
    font-size: 1.2em;
  }
  .calendar_title .icon img {
    width: 30rpx;
    height: 30rpx;
    padding: 7rpx 15rpx;
  }
  .calendar {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    padding: 0 0 20rpx;
    font-family: FZZhunYuan-M02S;
    box-sizing: border-box;
  }
  .header {
    font-size: 0;
    width: 100%;
  }
  .header > view {
    display: inline-block;
    width: 14.285%;
    color: #666;
    font-size: 30rpx;
    text-align: center;
    // border-bottom: 1px solid #d0d0d0;
    padding: 20rpx 0;
  }
  .date-box {
    font-size: 0;
    width: 100%;
    margin: 0 auto;
  }
  .date-box > view {
    position: relative;
    display: inline-block;
    width: 14.285%;
    color: #666;
    text-align: center;
    vertical-align: middle;
  }
  .date-head {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 12pt;
    .aaa{
      width: 60rpx;
      border-radius: 22rpx;
      text-align: center;
      color: #fff;
      background-color: #9BDA37;
      box-shadow:0px 2px 6px 0px rgba(245,249,244,1);
      margin: 0 auto;
    }
  }
  .nowDay .date-head {
    width: 60rpx;
    border-radius: 22rpx;
    text-align: center;
    color: #fff;
    background-color: #9BDA37;
    box-shadow:0px 2px 6px 0px rgba(245,249,244,1);
    margin: 0 auto;
  }
  .qianDay .date-head{
    color: #D1D1D1;
  }