el-calendar 自定义我的日程

效果图

1. el-calendar官方文档内容太少,具体需要css样式,可以根据ui设置自行修改,一下的代码只展示JS的逻辑.

2. 遍历日期，确定显示内容

<el-calendar v-model="value">
  <template slot="dateCell" slot-scope="{ date, data }">
    <div class="month-date" @click="dateBnt(data.day)">
      <!-- 为了每月的开始时间与结束时间-->
      <input type="hidden" :value="data.day" />
      <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
      <template v-for="(item, index) in calendarData[data.day]">
        <div v-if="index < 2" class="is-selected over-text" @click="handleItemClick(item)">
          {{ item.content }}
        </div>
        <i
          v-if="index === calendarData[data.day].length - 1 && calendarData[data.day].length > 2"
          class="el-icon-caret-bottom calendar-caret"
          @click="handleMore($event, calendarData[data.day], data.day)"
        />
      </template>
    </div>
  </template>
</el-calendar>
3.js的逻辑代码
<script>
export default {
  name: 'Day',
  components: {
    checkDialog,
    moreCalendar,
  },
  data() {
    return {
      value: new Date(),
      calendarData: [],
      dailyDay: {
        startTime: '',
        endTime: '',
        period: 2,
      },
      types: [],
      repeatData: {},
      width: '480px',
      itemArray: [],
      moreData: {
        date: this.$moment(new Date()).format('YYYY-MM-DD'),
      },
    };
  },
  mounted() {
    this.nextTPrevClick();
  },
  methods: {
    // 点击上一月/下一月的逻辑判断
    setCalendarButton() {
      this.$nextTick(() => {
        let prevBtn = document.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(1)');
        let nextBtn = document.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(3)');
        this.dailyDay.startTime = document.querySelector(
          '.month .el-calendar-table__row:first-child td:nth-child(1) input',
        ).value;
        this.dailyDay.endTime = document.querySelector(
          '.month .el-calendar-table__row:last-child td:last-child input',
        ).value;
        prevBtn.setAttribute('class', 'el-button--text');
        // 设置月文字为图标
        prevBtn.lastChild.setAttribute('class', 'el-icon-arrow-left');
        prevBtn.lastChild.innerHTML = '';
        nextBtn.setAttribute('class', 'el-button--text');
        nextBtn.lastChild.setAttribute('class', 'el-icon-arrow-right');
        nextBtn.lastChild.innerHTML = '';
        this.getList();
      });
    },
    // 列表
    getList() {
      const data = {
        types: this.types,
        time: this.dailyDay.startTime,
        end: this.dailyDay.endTime,
        period: this.dailyDay.period,
      };
      dealtScheduleListApi(data)
        .then((res) => {
          this.calendarData = res.data;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    // 判断日历中为上一个月,下一个月的切换
    nextTPrevClick() {
      let prevBtn = document.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(1)');
      let nextBtn = document.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(3)');
      let prevFirst = document.querySelector('.month .el-calendar-table__row:first-child');
      let nextLast = document.querySelector('.month .el-calendar-table__row:last-child');
      let prevArr = prevFirst.getElementsByClassName('prev');
      let nextArr = nextLast.getElementsByClassName('next');
      for (let i = 0; i < prevArr.length; i++) {
        this.tabClick(prevArr[i]);
      }
      for (let i = 0; i < nextArr.length; i++) {
        this.tabClick(nextArr[i]);
      }
      this.tabClick(prevBtn);
      this.tabClick(nextBtn);
    },
    tabClick(obj) {
      obj.addEventListener('click', (e) => {
        this.dailyDay.startTime = document.querySelector(
          '.month .el-calendar-table__row:first-child td:nth-child(1) input',
        ).value;
        this.dailyDay.endTime = document.querySelector(
          '.month .el-calendar-table__row:last-child td:last-child input',
        ).value;
        this.getList();
      });
    },
    dateBnt(data) {
      this.$emit('handleMonth', { type: 3, date: data });
    },
    handleRepeatData(data) {
      if (data.type === 1) {
        this.getList();
        this.$emit('handleMonth', { type: 1, data: [] });
      } else {
        this.$emit('handleMonth', { type: 2, data: this.itemArray });
      }
    },
    handleItemClick(item) {
      this.repeatData = {
        title: this.$t('calendar.scheduleview'),
        width: this.width,
        data: item,
      };
      this.itemArray = item;
      this.$refs.repeatDialog.handleOpen();
    },
    handleMoreCalendar(data) {
      this.handleItemClick(data.data);
    },
    handleMore(event, item, day) {
      this.moreData.data = item;
      this.moreData.date = day;
      this.$refs.moreCalendar.menuVisible = true;
      this.$refs.moreCalendar.rightClick(event);
    },
  },
};
</script>

总体来说,虽然el-calendar的自定义样式整体的难度较低,但是处理数据还是比较麻烦,最好与后端商量,返回比较合理的数据,是优化el-calendar的重点.本例后端返回的数据如下图所示

以上就是CRMEB讲解的关于el-calendar 自定义我的日程所有内容，有不懂的地方可以下方留言谈论互相学习！