使用el-calendar实现自定义日程

日程组件效果图：使用element-ui中的el-date-picker月份选择器和el-calendar日历组件实现自定义日程管理组件

template代码：

<template>
  <div class="custome-canlendar">
    <div class="title">
			我的日程
			<el-button @click="handleAdd('add')" class="rtbtn" size="mini"><i class="el-icon-plus"></i>添加日程</el-button>
		</div>
    <div class="block">
      <div class="data-analysis">
        <div class="month-select">
          <el-button class="month-btn" icon="el-icon-arrow-left" @click="changeMonthByBtn('prev')"></el-button>
          <el-date-picker
            v-model="calendarValue"
            type="month"
            format="yyyy年MM月"
            value-format="yyyy-MM"
            placeholder="选择月"
            @change="changeMonth">
          </el-date-picker>
          <el-button class="month-btn" icon="el-icon-arrow-right" @click="changeMonthByBtn('next')"></el-button>
        </div>
        <el-calendar v-model="calendarValue">
          <!--选中小红点-->
          <template
            slot="dateCell"
            slot-scope="{data}"
          >
            <div @click="handleClickDate(data)">
              <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
              <div v-for="(item, key) in activeday" :key="key">
                <el-badge v-if="data.day == item.crt_month_date" is-dot class="item"></el-badge>
              </div>
            </div>
          </template>
        </el-calendar>  
      </div>
      <div class="schedule-list">
        <div class="item" v-for="(item,index) in scheduleList" :key="index" @click="handleAdd('detail', item)">
          <span class="date">{{ item.start_time + '-' + item.end_time }}</span>
          <span class="content">{{ item.title }}</span>
        </div>
      </div>
    </div>
		<ScheduleDialog
      ref="addDialog"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :modelObj="model"
      :source="source"
      @reFresh="init"
      @edit="handleAdd">
    </ScheduleDialog>

  </div>
</template>

js代码：

<script>
const ScheduleDialog = () => import('@/components/dialog/ScheduleDialog.vue');

export default {
  components: {
    ScheduleDialog
  },
  data(){
    return {
      calendarValue: '',
      activeday: [], // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
      dialogVisible: false,
      model: {},
      source: 'add',
      scheduleList: []
    }
  },
  created(){
    this.init();
  },
  methods: {
    // 获取系统当前月
    init() {
      let cur = new Date();
      this.calendarValue = cur.getFullYear() + '-' + this.formatDate(cur.getMonth()+1) + '-' + this.formatDate(cur.getDate());
      
      this.getCurMonthCanlendar();
      this.getScheduleByDate(this.calendarValue);
    },
    // 获取选中日期所有日程
    getScheduleByDate(day) {
      this.$api.home.getScheduleByDate(day).then(res => {
        if(res.status === 200 && res.data.code !==-1) {
          const { data } = res.data;
          this.scheduleList= [ ...data ];
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    // 获取选中月所有日程
    getCurMonthCanlendar() {
      this.$api.home.getCalendarByMonth(this.calendarValue.slice(0,7)).then(res => {
        if(res.status === 200 && res.data.code !==-1) {
          const { data } = res.data;
          this.activeday= [ ...data ];
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    // 点击日历中的日期
    handleClickDate(data) {
      this.getScheduleByDate(data.day);
    },
    // 新增、编辑、查看日程
    handleAdd(source, row) {
      this.dialogVisible = true;
      this.source = source;
      if(row) {
        this.model = row;
      } else {
        this.model = {
          title: '',
          repeat_cycle_number: 1,
          repeat_cycle_unit_week: '',
          repeat_cycle_unit: '',
          notice_type: '',
          urgent_degree: '',
          start_date: '',
          end_date: ''
        }
      }
    },
    formatDate(m) {
      return m < 10 ? '0' + m : m;
    },
    // 月份切换
    changeMonth(val) {
      // 如果是当前月选择=当天日期
      // 如果是其他月=1号
      let selval = new Date(val);
      let selMon = selval.getMonth() + 1;
      let cur = new Date();
      let curMon = cur.getMonth() + 1;
      if(selMon === curMon) {
        this.calendarValue = cur.getFullYear() + '-' + this.formatDate(cur.getMonth()+1) + '-' + this.formatDate(cur.getDate());
      } else {
        this.calendarValue = val + '-' + '01';
      }
      this.getCurMonthCanlendar();
      this.getScheduleByDate(this.calendarValue);
    },
    // 自定义切换上月下月
    changeMonthByBtn(txt) {
      let realDate = new Date();
      let realMonth = realDate.getMonth();
      let cur =  new Date(this.calendarValue);
      let curM = cur.getMonth();
      let curY = cur.getFullYear();
      let resultM = '';
      let resultY = '';
      if(txt === 'prev') {
        if(curM === 0) {
          resultY = curY - 1;
          resultM = 11; 
        } else {
          resultY = curY;
          resultM = curM - 1;
        }
      } else if(txt === 'next') {
        if(curM === 11) {
          resultY = curY + 1;
          resultM = 0
        } else {
          resultY = curY;
          resultM = curM + 1 ;
        }
      }
      let resultDate = resultM === realMonth ? realDate.getDate() : '01';
      this.calendarValue = resultY + '-' + this.formatDate(resultM + 1) + '-' + resultDate;
      this.getCurMonthCanlendar();
      this.getScheduleByDate(this.calendarValue);
    }
  }
}
</script>

sass代码：

.custome-canlendar {
  background: #fff;
  height: 540px;
  // overflow-y: auto;

  .title {
		padding: 13px 8px 12px 19px;
    border-bottom: 1px solid #F2F2F2;
    font-weight: 500;
    color: #1A1A1A;
    font-size:16px;
		position: relative;


    &:before {
			content: "";
			display: inline-block;
			height: calc(100% - 30px);
			width: 3px;
			margin-right: 0px;
			background: #C70019;
			/*margin-top: 10px;*/
			border-radius: 5px;
			/*margin-left: 10px;*/
			position: absolute;
			left:10px;
      top: calc(50% - 7px);
		}

    .rtbtn {
      float: right;
      /deep/ span {
        font-size:14px;
      }
    }

  }
  .block {
    height: calc(100% - 46px);
    overflow-y: auto;
  }

  /*日历样式修改*/
  .data-analysis {
    position: relative;
    .month-select {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);

      .month-btn {
        padding: 9px 5px;
        border: 0;

        &:hover,
        &:focus {
          color: #606266;
          background-color: #fff;
        }

        i {
           font-size:14px;
        }
      }

      /deep/ .el-date-editor {
        &.el-input{
          width: 100px;
        }
        .el-input__inner {
          padding: 0 5px;
          border: 0;
          letter-spacing: 1px;
          cursor: pointer;
           font-size:14px;
        }
        .el-input__prefix,
        .el-input__suffix {
          display: none;
        }
      } 
    }
    /deep/ .el-calendar{
      .el-calendar-table .el-calendar-day{
        width: 100%;
        height: 100%;
      }
      .el-calendar__header{
        padding: 6px 20px;
        border: 0;
        justify-content: space-between;
      }

      .el-calendar__button-group .el-button-group>.el-button span {
         font-size:14px;
      }
      .el-calendar-table thead th {
        padding: 6px 0;
        @include level3_fontsize();
      }
      .el-calendar__title {
        visibility: hidden;
      }
      .el-calendar__body {
        padding: 8px 0;
      }
      /*隐藏上个月下个月按钮*/
      .el-button-group>.el-button:first-child,
      .el-button-group>.el-button:last-child{
        display: none;
      }
      /*去掉原本背景颜色*/
      .el-calendar-table td:hover{
        background: transparent;
      }
      /*去掉选中背景颜色*/
      .el-calendar-table td.is-selected{
        background: transparent;
      }
      /*修改每一小格大小*/
      .el-calendar-table .el-calendar-day{
        position: relative;
        padding: 6px 8px;
        text-align: center;
      }
      .el-calendar-table .el-calendar-day:hover {
        background: transparent;
      }

      td .spandate {
        margin: auto;
        width: 26px;
        height: 26px;
        line-height: 26px;
        border-radius: 50%;
        @include level3_fontsize();
      }
      td.is-selected .spandate{
        width: 26px;
        height: 26px;
        line-height: 26px;
        border-radius: 50%;
        color: #fff;
        background-color: $--mouse_selection_color;
      }
      /*小红点样式*/
      .el-badge {
        position: absolute;
        left: 0;
        bottom: -13px;
        width: 100%;
      }
      .el-badge__content {
        background-color: #C70019;

        &.is-dot {
          width: 7px;
          height: 7px;
        }
      }
      /*日历边框颜色*/
      .el-calendar-table tr td:first-child,
      .el-calendar-table tr:first-child td,
      .el-calendar-table td{
        border: 0;
      }
    }
  }

  .schedule-list {
    padding: 0 20px 10px;
    .item {
      position: relative;
      margin-bottom: 5px;
      padding: 0 11px;
      line-height: 24px;
      background-color: #f1f1f1;
      cursor: pointer;
      
      &::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        content: "";
        width: 3px;
        background: #C70019;
      }

      .date {
        margin-right: 5px;
        font-size:14px;
      }
      .content {
        color: #666;
        font-size:14px;
      }
    }
  }
}