<script setup>
import  {ref} from 'vue'
// dom
const calendar = ref()
const calenderValue = ref(new Date())
// 时间参数
const calendarDate = ref()
const toggleClick = () =>{

}
const selectDate = (val) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
</script>

<template>
  <el-calendar ref="calendar"  v-model="calendarDate">
    <template #header="{date}">
<!--      <div class="calender-header">-->
        <p>
<!--          <span @click="selectDate('prev-year')">上一年</span>-->
          <span @click="selectDate('prev-month')">上个月</span>
        </p>
        <span @click="toggleClick">{{date}}</span>
        <p>
          <span @click="selectDate('next-month')">下个月</span>
<!--          <span @click="selectDate('next-year')">下一年</span>-->
        </p>

<!--      </div>-->

    </template>
    <template #date-cell="{ data }">
      <p class="day">{{ data.day.split('-').slice(1)[1] }}</p>
    </template>
  </el-calendar>
</template>

<style scoped lang="less">
:deep(.el-calendar){
  font-size: .7rem;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
}
:deep(.el-calendar__header){
  align-items: center;
  padding: 0.5rem;
}
:deep(.el-calendar-day){
  //display: none;
  width: 52px !important;
  padding: 0 !important;
  height: 30% !important;
  //max-height:  1.8rem!important;
}
:deep(.el-calendar-table thead th){
  padding: 0;
}
:deep(.el-calendar__body){
  padding: 0.5rem;
}
</style>