element-ui日历插件获取当前显示的第一天和最后一天

需求是要传入当前显示的第一天和最后一天来获取范围，再判断某个日期是否是假期，或者工作日

已知星期排版是固定的，第一天是星期天，最后一天是星期六。通过当月1号和最后一天再往前推算需要展示上个月几天，和下个月几天。

、// 获取日历显示时间范围
const getRange = async (date) => {
    
    
  // 日历第一天
  let firstDay = '';
  // 日历最后一天
  let lastDay = '';
  // 今天
  const today = date ? date : new Date();
  // 上月
  const m = today.getMonth();
  // 本月
  const cm = m + 1;
  // 下月
  const lm = m + 2 > 12 ? 1 : m + 2;
  // 要显示的本月
  const currentMonth = cm < 10 ? '0' + cm : cm;
  // 要显示的本本年
  const currentYear = today.getFullYear();
  // 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
  const prevYear = m == 0 ? currentYear - 1 : currentYear;
  const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m;
  // 上个月天数
  const pmd = new Date(prevYear, m, 0).getDate();
  // 下个月的年份，当前12月，则需要加一年
  const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear;
  const lastMonth = lm < 10 ? '0' + lm : lm;
  // 1号是周几
  const firstWeek = new Date(today.setDate(1)).getDay();
  // 如果是周日，则不需要显示上个月
  if (firstWeek == 0) {
    
    
    firstDay = `${
      
      currentYear}-${
      
      currentMonth}-01`;
  }
  // 其他周几，对应用上个月的天数往前推算
  else {
    
    
    firstDay = `${
      
      prevYear}-${
      
      prevMonth}-${
      
      pmd - (firstWeek - 1)}`;
  }
  // 这个月天数
  const currentMonthDate = new Date(currentYear, cm, 0).getDate();
  // 最后一天是周几
  const lastWeek = new Date(today.setDate(currentMonthDate)).getDay();
  // 周六显示当月最后一天
  if (lastWeek == 6) {
    
    
    lastDay = `${
      
      currentYear}-${
      
      currentMonth}-${
      
      currentMonthDate}`;
  }
  // 其他周几，对应往后推算
  else {
    
    
    const day = ['06', '05', '04', '03', '02', '01'];
    lastDay = `${
      
      lastYear}-${
      
      lastMonth}-${
      
      day[lastWeek]}`;
  }
  console.log('第一天', firstDay);
  console.log('最后一天', lastDay);
  //loading.value = true;
  dates.value = [];
  const resp = await queryWorkCalendar({
    
     startDate: firstDay, endDate: lastDay });
  Object.keys(resp.data?.type).forEach((key: string) => {
    
    
    dates.value.push({
    
     date: key, ...resp.data?.type[key] });
  });
  //loading.value = false;
};

这个日历插件右上角的按钮上个月下个月事件，切换后默认是那月1号，传入这个时间就可以重新获得切换后的月份的时间范围，用v-model绑定切换后的数据

<el-calendar ref="calendarRef" v-model="currentDate" v-loading="loading">
        <template #date-cell="{ data }">
          <div v-for="(item, index) in dates" :key="index" class="cell">
            <div v-if="data.day == item.date">
              {
   
   { data.day.split('-').slice(1).join('-') }}
              <el-badge
                v-if="item.type == '3' || item.type == '2'"
                :value="item.name"
                badge-class="item"
                :type="item.type == '2' ? 'success' : 'danger'"
              >
              </el-badge>
              <el-badge v-if="item.type == '0'" value="班" badge-class="item" type="primary"> </el-badge>
              <el-badge v-if="item.type == '1'" value="休" badge-class="item" type="success"> </el-badge>
              <el-badge v-if="item.wrkPunchRecordVos && item.wrkPunchRecordVos.length > 1" is-dot badge-class="item" type="success"> </el-badge>
              <el-badge v-else-if="item.wrkPunchRecordVos && item.wrkPunchRecordVos.length == 1" is-dot badge-class="item" type="warning"> </el-badge>
              <el-badge v-else is-dot badge-class="item" type="info"> </el-badge>
            </div>
          </div>
        </template>
      </el-calendar>

接口返回数据

watch监听月份变动，重新计算日期

// 获取当前点击上下月按钮后的变化
watch(calendar, (n, o) => {
    
    
	if (n.getFullYear() !== o.getFullYear() || n.getMonth() !== o.getMonth()) {
    
    
		getRange(n)
	}