long_IslandOcean/src/components/calendar/index.vue

<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"  :row="5">
    <template #header="{ date }">
      <div>
        <img
          @click="selectDate('prev-year')"
          src="../../assets/images/overview/prevMonth.png"
          style="
            width: 1rem;
            height: 1rem;
            cursor: pointer;
          "
        />
        <img
          @click="selectDate('prev-month')"
          src="../../assets/images/overview/prevYear.png"
          style="
            width: 1rem;
            height: 1rem;
            cursor: pointer;
          "
        />

        <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
        <img
          @click="selectDate('next-month')"
          src="../../assets/images/overview/nextYear.png"
          style="
            width:1rem;
            height: 1rem;
            cursor: pointer;
          "
        />
        <img
          @click="selectDate('next-year')"
          src="../../assets/images/overview/nextMonth.png"
          style="
            width: 1rem;
            height: 1rem;
            cursor: pointer;
          "
        />
      </div>
      <div class="returningToThisMonth" @click="selectDate('today')"></div>
    </template>
    <template #date-cell="{ data }">
      <p class="day">{{ data.day.split("-").slice(1)[1] }}</p>
      <p class="value">{{ data.day.split("-").slice(1)[1] }}</p>
    </template>
  </el-calendar>
</template>

<style scoped lang="less">
.el-calendar {
  font-size: 0.7rem;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
:deep(.el-calendar__header) {
  align-items: center;
  padding: 0 0.3rem;
  border-bottom: none;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
:deep(.el-calendar__header > div:nth-child(-n + 1)) {
  // flex-grow: 1;
  // text-align: center;
  display: flex;
  justify-content: space-evenly;
  position: relative;
  left: 13%;
  width: 56%;
}
:deep(.el-calendar-day) {
  //display: none;
  width: 54px !important;
  padding: 3px !important;
  height: 25px !important;
  color: #b1fffa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // border:0.01px solid rgba(177, 255, 250, 0.2)
  //max-height:  1.8rem!important;
  @media only screen and (min-height: 1000px) {
    height: 30px !important;
  }
}
:deep(.el-calendar-day .day) {
  font-size: 13px;
  height: 60%;
  font-family: "D-DIN-Bold";
}
:deep(.el-calendar-day .value) {
  font-size: 10px;
  color: rgba(91, 250, 241, 1);
  height: 40%;
}
:deep(.el-calendar-table td) {
  background: url(../../assets/images/overview/thisMonth.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-calendar-table thead th) {
  padding: 0;
  color: #ddfffd;
}
:deep(.el-calendar-table td) {
  border: none;
}
:deep(.el-calendar-table tr td:first-child) {
  border: none;
}
:deep(.el-calendar-table tr:first-child td) {
  border: none;
}
//鼠标悬停
:deep(.el-calendar-table :hover) {
  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-calendar__body) {
  padding: 0 0.5rem;
  height: 79% !important;
}
//修改不是本月的字体颜色
:deep(.el-calendar-table__row) {
  .prev,
  .next {
    // 修改非本月
    .el-calendar-day {
      .day {
        font-size: 12px;
        color: rgba(177, 255, 250, 0.4);
      }
      .value {
        color: rgba(177, 255, 250, 0.4);
      }
    }
  }
}
//修改选中后的颜色
:deep(.el-calendar-table td.is-selected) {
  // .el-calendar-day {
  // p {
  // 选中日期颜色
  color: rgba(255, 251, 222, 1);
  // }
  // }
  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
  background-size: 100% 100%;
  border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
  .el-calendar-day {
    .day {
      color: rgba(255, 251, 222, 1);
    }
    .value {
      color: rgba(1, 246, 139, 1);
    }
  }
}
.returningToThisMonth {
  width: 67px;
  height: 21px;
  background: url(../../assets/images/overview/returningToThisMonth.png)
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 9%;
  cursor: pointer;
}
</style>