element中日历自定义内容以及时间范围

小鱼儿心语：世上有能挽回的和不能挽回的事，而时间就是一种不可挽回的事，也许，不负光阴就是最好的努力，而努力就是最好的自己。—— 村上春树

昨天刚刚实现了一个小功能，日历只展示近一周日期，并且自定义内容，同时可以切换上一周、下一周的数据，简简单单的一个小功能，实现起来也是有很多不可避免地坑，需要仔细点挖，哈哈哈哈哈哈哈~

废话不多说，先来看下效果展示吧：

日历.png

• v-if="(data.day.split('-').slice(2).join('-')).indexOf(item.date.split('-')[2])!=-1"这个判断是必不可少的哦，我就是在这里吃了大亏，起初以为这句没用，但是事实很有用，为了判断循环数组中与每天的日期作对比，对应该日期的自定义内容才会显示；不然所有的内容都会展示在一个日期框中~

• 设置 range 属性指定日历的显示范围。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。

<el-calendar :range="[starttime, endtime]">
   <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
   <template slot="dateCell" slot-scope="{date, data}">
       <div style="margin-top: -10px;">{{ data.day.split('-').slice(2).join('-') }}</div>
       <div v-if="(data.day.split('-').slice(2).join('-')).indexOf(item.date.split('-')[2])!=-1" style="width:100%;position: relative;top: -40px;" v-for="(item,index) in tableDataleader" @click="tapdetail(item)" :key="index">
          <span :style="{color:item.qList.length=='0'?'':'#e75454'}" v-if="item.timechuo<=nowtime">{{item.qList.length=='0'?'正常':'空岗'}}</span>
          <i style="display: block;width:100%;position: absolute;top:20px;">{{ data.isSelected ? '✔️' : ''}}</i>
       </div>
   </template>
</el-calendar> 

下面是获取当前日期所在一周的日期数据、获取当前第几周、点击上一周、下一周日期获取：

1、获取当前日期所在一周的日期数据

getWeektime () {
    let oneDayTime = 1000 * 60 * 60 * 24
    let today = new Date()
    let todayDay = today.getDay() || 7
    let startDate = new Date(
      today.getTime() - oneDayTime * (todayDay - 1)
    )
    let dateList = []
    this.tableDataleader = []
    for (let i = 0; i < 7; i++) {
       let temp = new Date(startDate.getTime() + i * oneDayTime)
       let year = temp.getFullYear()
       let month = temp.getMonth() + 1 < 10 ? '0' + (temp.getMonth() + 1) : temp.getMonth() + 1
       let day = temp.getDate() < 10 ? '0' + temp.getDate() : temp.getDate()
       dateList[i] = `${year}-${month}-${day}`
    }
    // 以下是根据实际情况进行赋值
    this.starttime = dateList[0]
    this.endtime = dateList[dateList.length-1]
    this.getWeekNumber(this.starttime)
    this.tapleaderlist()
    //  dateList为当前日期所在一周的数据
    return dateList
},

2、点击事件：获取上一周、下一周的日期数据

    // 点击上一周的方法
    tapshang(){
      this.getTime(-7,this.starttime)
    },
    // 点击下一周的方法
    tapxia(){
      this.getTime(7,this.starttime)
    },
    getTime(time,datenum) {
       //  time = 7下周  -7上周   0本周
      let date = new Date(datenum); //this.chaoZuoTime
      let currentFirstDate = new Date(date);

      let formatDate = function(date) {
        // console.log(date);
        let year = date.getFullYear(); //年
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
         let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        // let arr = ["日", "一", "二", "三", "四", "五", "六"];
        let week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][
          date.getDay()
        ];
        //我需要的格式是  （周几 月.日） 这里看你们的需求
        return year + "-" + month + "-" + day;
      };
      let addDate = function(date, n) {
        // console.log(date.getDate() + n);
        date.setDate(date.getDate() + n);
        return date;
      };
      let setDate = function(date) {
        let week = date.getDay() - 1;
        date = addDate(date, week * -1);
        currentFirstDate = new Date(date);
        let weekList = [];
        for (let i = 0; i < 7; i++) {
          weekList[i] = formatDate(i == 0 ? date : addDate(date, 1));
        }
        return weekList;
      };
      this.thisWeek = []
      // let upWeek = setDate(addDate(currentFirstDate, -7));  //  上一周的日期数据
      this.thisWeek = setDate(addDate(currentFirstDate, time)); //  获取到上一周 / 下一周的日期数据
      // let nextWeek = setDate(addDate(currentFirstDate, 7)); // 下一周的日期数据
      // let today = formatDate(date); //今日日期

      //以下是根据实际情况赋值
      this.starttime = this.thisWeek[0]
      this.endtime = this.thisWeek[this.thisWeek.length-1]
      this.getWeekNumber(this.thisWeek[0])
      this.tapleaderlist()
    },

3、点击上一周、下一周的同时我们还要获取到该周为当年的第几周：

   isLeapYear (year) {
     return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0)
   },
   getMonthDays (year, month) {
     return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] || (this.isLeapYear(year) ? 29 : 28)
   },
   // date为某一个日期：'2023-08-08'
   getWeekNumber (date) {
     var now = new Date(date),
     year = now.getFullYear(),
     month = now.getMonth(),
     days = now.getDate()
     for (var i = 0; i < month; i++) {
       days += this.getMonthDays(year, i)
     }
     var yearFirstDay = new Date(year, 0, 1).getDay() || 7
     var week = null
     if (yearFirstDay == 1) {
       week = Math.ceil(days / yearFirstDay)
     } else {
       days -= (7 - yearFirstDay + 1)
       week = Math.ceil(days / 7) + 1
     }
     console.log(new Date(year, 0, 1).getDay())
     this.weeknum = week
     return week
   },

以上就是我在此功能中用到的所有方法，供大家参考，代码直接复制即可~