官方给出日历组件无法自定义头部

结果图：

 

 

 

1.首先去掉官方头部

   a> css去除：.el-calendar__header { display: none;}；

   b>js去除：    this.$el.querySelector('div.el-calendar__header').remove()；

2.通过js Date对象实现日期加/减 年/月操作更改日历绑定值；

3.通过chageValue方法切换日历；

代码如下：包含了日历内部插槽实现部分功能，有需求自行更改

 

<el-calendar class="calendar-page-calendar" ref="calendar" v-model="calendarDate">

            <template slot="dateCell" slot-scope="{data}">

               <div class="calendar-cell" @click="clickDateCell(data)">

                  <div class="betweenCenter">

                     <span>

                        <i

                           v-if="data.isSelected"

                           class="el-icon-success"

                           :style="{color:daysData.get(data.day.split('-')[2]) > 50?'#29CC97':'#4C84FF'}"

                        ></i>

                     </span>

                     <span>{{ parseInt(data.day.split('-').slice(2)) }}</span>

                  </div>

                  <div v-if="data.day.split('-')[1] == nowMonth">

                     <span>{{daysData.get(data.day.split('-')[2]) || 0}}%</span>

                     <el-progress

                        :percentage="daysData.get(data.day.split('-')[2])"

                        :stroke-width="3"

                        :show-text="false"

                        :color="daysData.get(data.day.split('-')[2]) > 50?'#29CC97':'#4C84FF'"

                     ></el-progress>

                  </div>

               </div>

            </template>

         </el-calendar>

js:

 chageDate(e) {

         switch (e) {

         case 'previousYear':

            this.calendarDate = new Date(this.calendarDate.setFullYear(this.calendarDate.getFullYear() - 1));

            this.$refs.calendar.chageValue(this.calendarDate);

            break;

         case 'previousMonth':

            this.calendarDate = new Date(this.calendarDate.setMonth(this.calendarDate.getMonth() - 1));

            this.$refs.calendar.chageValue(this.calendarDate);

            break;

         case 'nextMonth':

            this.calendarDate = new Date(this.calendarDate.setMonth(this.calendarDate.getMonth() + 1));

            this.$refs.calendar.chageValue(this.calendarDate);

            break;

         case 'nextYear':

            this.calendarDate = new Date(this.calendarDate.setFullYear(this.calendarDate.getFullYear() + 1));

            this.$refs.calendar.chageValue(this.calendarDate);

            break;

         }

      },

​