element plus calendar 自定义排班值班日历样式（vue3）

话不多说先上效果图
 vue3写的噜
vue2也差不多把template 插槽写法换一下就可以完全复用

     直接来个完整的html

    &lt;!-- 排班日历弹框 --&gt;
    &lt;div id="pop-up"
         class="dutyWH"
         v-if="beonduty"&gt;
      <div class="leftangle"&gt;</div&gt;
      <div class="rightangle"&gt;</div&gt;

      <div class="weather-head"&gt;
        <div class="head-bg"&gt;排班日历</div&gt;

        <el-icon class="weather-icon"
                 size='18'
                 color="#1096DB"
                 @click="closeduty"&gt;
          <Close />
        </el-icon>

      </div>
      <div class="weather-body">
        <div class="body-Custom">
          <el-calendar :start-day-of-week="1"
                       ref="calendar">

            <template #header="{ date }">
              <span>{{ date }}</span>
              <div class="head-title">
                <div class="daydiv">
                  <div class="dayshift"></div>
                  <div>白班</div>
                </div>
                <div class="daydiv">
                  <div class="nightshift"></div>
                  <div>晚班</div>
                </div>
              </div>

              <div class="calendar-click">
                <div :class="['clickitem',allData.clickitem==item.value?'actived':'']"
                     v-for="(item,index) in allData.dayList"
                     :key="index+77"
                     @click="selectDate(item.value)">
                  {{item.name}}
                </div>
              </div>
            </template>

            <template #date-cell="{ data }">
              <div class="data-title">{{moment(data.day).format('MM-DD')}}</div>
              <div class="data-body"
                   v-for="item in allData.scheduleData"
                   :key="item"
                   @click="changepeople(item,data.day)">
                <div class="daydiv"
                     v-if="(item.startTime==data.day&amp;&amp;item.type==0)">
                  <div class="dayshift"></div>
                  <div>{{item.personnelName}}</div>
                </div>
                <div class="daydiv"
                     v-if="(item.startTime==data.day&amp;&amp;item.type==1)">
                  <div class="nightshift"></div>
                  <div>{{item.personnelName}}</div>
                </div>
              </div>
            </template>
          </el-calendar>

        </div>
      </div>
    </div>

js和变量

const calendar = ref()
const beonduty = ref(false)

  clickitem: '',
  scheduleData: [
    {
      startTime: '2023-05-11',
      workingDay: "02",
      type: 0,
      content: "土方开挖",
      personnelName: '李晓明'
    },
    {
      startTime: '2023-05-11',
      workingDay: "02",
      type: 1,
      content: "土方开挖",
      personnelName: '张晓军'
    },
  ],
  dayList: [
    { name: '上月', value: 'prev-month' },
    { name: '今天', value: 'today' },
    { name: '下月', value: 'next-month' },
  ],


function selectDate (val) {
  calendar.value.selectDate(val)
  allData.clickitem = val
}

// 关闭排班日历弹框
function closeduty () {
  beonduty.value = false
};

部分css
#pop-up {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 530px;
  height: 375px;
  background: #021534;
  border: 1px solid #114f89;
  z-index: 2000;

  .weather-head {
    position: relative;
    height: 36px;
    background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);

    .head-bg {
      position: absolute;
      width: 180px;
      line-height: 46px;
      height: 46px;
      left: 0;
      bottom: 0;
      background: url('@/assets/images/cockpit/dia-head.png') center no-repeat;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 550;
      color: #ffffff;
      padding-left: 20px;
    }

    .weather-icon {
      cursor: pointer;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .weather-body {
    padding: 0 11px;
    height: calc(100% - 36px);
    background: #021534;
    border: 1px solid #114f89;
    border-top: 1px solid #1096db;

     ::v-deep .body-Custom {
      height: calc(100% - 60px);
      width: 100%;

      .calendar-click {
        border: 1px solid #1096db;
        color: #1096db;
        display: flex;
      }
      .actived {
        cursor: pointer;
        background: #1096db;
        color: #021534;
      }

      .clickitem {
        width: 50px;
        height: 24px;
        border-radius: 2px 0px 0px 2px;
        cursor: pointer;
        text-align: center;
        border-right: 1px solid #1096db;
      }
      .clickitem:last-child {
        border: none;
      }

      .el-calendar {
        height: 100%;
        background: transparent;
        color: #b4cded;
      }

      .el-calendar-table .el-calendar-day:hover {
        cursor: pointer;
        background-color: #064c7b;
      }

      .el-calendar-table td.is-selected {
        background-color: #384d62;
      }

      .el-calendar-table .el-calendar-day {
        width: 68px;
        height: 72px;
        padding: 0;
        text-align: center;
        background: #053a66;
        margin-right: 1px;
        margin-bottom: 1px;
      }

      .data-title {
        height: 16px;
        line-height: 16px;
        background: #064c7b;
      }

      .el-calendar-table:not(.is-range) td.prev {
        color: #b4cded;
      }

      .el-calendar-table tr td {
        border: none;
      }

      .el-calendar__body {
        padding: 10px;
        padding-top: 0;
        background: #052146;
        margin-bottom: 10px;
      }

      .el-calendar__header {
        border: none;
        font-size: 16px;
        padding: 12px 5px;
      }

      .el-calendar-table thead th {
        color: #50a3ff;
      }

      .daydiv {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 25px;
        color: #b4cded;
      }

      .head-title {
        font-size: 14px;
        display: flex;
        .daydiv {
          margin-right: 30px;
        }
      }

      .dayshift {
        margin-right: 7px;
        width: 6px;
        height: 6px;
        background: #e9d390;
        border-radius: 50%;
      }

      .nightshift {
        margin-right: 7px;
        width: 6px;
        height: 6px;
        background: #2186f6;
        border-radius: 50%;
      }
    }
   }