admin-fiveFollowing/src/views/patrolManage/patrolPlan/calendar/index.vue

<template>
  <div class="calendar">
    <!-- <el-calendar>
      <template #dateCell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar> -->
    <el-calendar ref="calendar" id="el-calendar-table">
      <template #dateCell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
            <!-- {{data}} -->
          {{ data.day.split('-').slice(2).join('-') }}
          <span style="display: block" v-for="ref in 10" :key="ref">
            <el-tooltip
              class="item"
              effect="dark"
              :content="dataContent"
              placement="top"
            >
              <span>{{ data.isSelected ? dataContent : '' }}</span>
            </el-tooltip>
          </span>
        </p>
      </template>
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="mini" @click="selectDate('prev-year')">
            上一年
          </el-button>
          <el-button size="mini" @click="selectDate('prev-month')">
            上一月
          </el-button>
          <el-button size="mini" @click="selectDate('today')">今天</el-button>
          <el-button size="mini" @click="selectDate('next-month')">
            下一月
          </el-button>
          <el-button size="mini" @click="selectDate('next-year')">
            下一年
          </el-button>
        </el-button-group>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'calendar',
  components: {},
  props: {},
  setup() {
    const calendar = ref()
    const selectDate = (val) => {
      calendar.value.selectDate(val)
    }

    onMounted(() => {
      const th = document
        .getElementById('el-calendar-table')
        .getElementsByClassName('el-calendar__body')[0]
        .getElementsByClassName('el-calendar-table')[0].childNodes[0].children
      for (let i in th) {
        th[i].innerHTML == 'Sun'
          ? (th[i].innerHTML = '周一')
          : th[i].innerHTML == 'Mon'
          ? (th[i].innerHTML = '周二')
          : th[i].innerHTML == 'Tue'
          ? (th[i].innerHTML = '周三')
          : th[i].innerHTML == 'Wed'
          ? (th[i].innerHTML = '周四')
          : th[i].innerHTML == 'Thu'
          ? (th[i].innerHTML = '周五')
          : th[i].innerHTML == 'Fri'
          ? (th[i].innerHTML = '周六')
          : th[i].innerHTML == 'Sat'
          ? (th[i].innerHTML = '周日')
          : ''
      }
    })

    return {
      calendar,
      selectDate,
      dataContent: ref('1111111111111111111111111222222222222'),
    }
  },
})
</script>

<style>
.is-selected {
  color: #1989fa;
  overflow-y: auto;
  height: 100%;
}
.el-calendar {
  --el-calendar-selected-background-color: #76ff4d70 !important;
}
.is-selected::-webkit-scrollbar {
  display: none;
}
#el-calendar-table .el-calendar-table > thead > th {
  text-align: center;
}
</style>