el-calendar日历的各种样式及事件

效果图

班和休互相修改功能

el-calendar HTML代码段

可以根据自己的需要显示内容，样式

<template>
  <div class="la-container">
    <div class="la-info-main">
      <!-- 关于日历控件 -->
      <el-calendar
        class="lar-el-calendar"
        v-model="value"
        :first-day-of-week="7"
      >
        <template slot="dateCell" slot-scope="{ date, data }">
          <div
            :class="
              calendarData.indexOf(data.day) > -1
                ? 'lar-is-selected'
                : 'lar-no-selected'
            "
            @click="holidayUpdate(data, date)"
          >
            <span
              v-if="
                calendarData.indexOf(data.day) == -1 &&
                queryDate.indexOf(data.day) != -1
              "
              >班</span
            >
            <span
              v-else-if="
                calendarData.indexOf(data.day) > -1 &&
                queryDate.indexOf(data.day) != -1
              "
              style="color: #f73131"
              >休</span
            >
            <span v-else>&nbsp;</span>
            <d