xzlz_ksWeb/src/components/ZbCalendar/Calendar.vue

<template>
  <!-- 日历组件 -->
  <div class="calender">
    <div class="date-header">
      <!-- 切换日期按钮 -->
      <div class="btn-month">
        <div>
          <!-- <button @click="handleYear(-1)">&lt;&lt;</button> -->
          <el-button size="small" @click="handlePrev">
            <ArrowLeftBold style="width: 12px; height: 12px" />
          </el-button>
        </div>
        <div class="show-date">{{ year }}年{{ month }}月</div>
        <div>
          <el-button size="small" @click="handleNext">
            <ArrowRightBold style="width: 12px; height: 12px" />
          </el-button>
          <!-- <button @click="handleYear(1)">&gt;&gt;</button> -->
        </div>
      </div>
    </div>
    <div class="date-content">
      <div class="week-header">
        <div
          v-for="item in [
            '周日',
            '周一',
            '周二',
            '周三',
            '周四',
            '周五',
            '周六'
          ]"
          :key="item"
        >
          {{ item }}
        </div>
      </div>
      <div class="week-day">
        <div v-for="item in 42" :key="item + 'day'">
          <!-- 当月 -->
          <div
            :class="getDay(item - beginDay()) ? 'active' : ''"
            v-if="item - beginDay() > 0 && item - beginDay() <= prevDays(0)"
            @click="chack(item - beginDay())"
          >
            <span class="day">{{ item - beginDay() }}日</span>
            <div
              class="btn_day"
              v-for="(c, i) in data.filter(
                (evn) => evn.day * 1 == item - beginDay()
              )"
              :key="c * i"
            >
              <div class="tit" :style="{ backgroundColor: c.color }">
                {{ c.title }}
              </div>
              <div class="time">{{ c.time }}</div>
            </div>
          </div>
          <!-- 上月 -->
          <div
            class="other-day"
            v-else-if="item - beginDay() <= 0"
            @click="handlePrev"
          >
            <span class="day">{{ item - beginDay() + prevDays(1) }}日</span>
          </div>
          <!-- 下月 -->
          <div class="other-day" v-else @click="handleNext">
            <span class="day">{{ item - beginDay() - prevDays(0) }}日</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, defineProps, watch, defineEmits } from "vue";
const emit = defineEmits(["calClick"]);
const props = defineProps({
  //数据
  list: Array
});
watch(
  () => props.list,
  () => {
    data.value = [...props.list];
  },
  { deep: true }
);
const arr = ref([1]);
const active = ref(null);
const year = ref(null);
const month = ref(null);
const day = ref(null);
const curDate = ref(null);
const nextDay = ref(null);
const data = ref([]);

function getInitDate() {
  const date = new Date();
  year.value = date.getFullYear();
  month.value = date.getUTCMonth() + 1;
  day.value = date.getDate();
  curDate.value = `${year.value}-${month.value}-${day.value}`;
}
// 獲取當天日期
function getDay(e) {
  const date = new Date();
  const dqTime =
    date.getFullYear() + "-" + (date.getMonth() + 1) + date.getDate();
  return dqTime === year.value + "-" + month.value + e;
}
//获取1号开始位置
function beginDay() {
  return new Date(year.value, month.value - 1, 1).getDay();
}
// 获取某月天数
function prevDays(e) {
  return new Date(year.value, month.value - e, 0).getDate();
}
function handlePrev() {
  active.value = null;
  data.value = [];
  if (month.value == 1) {
    month.value = 12;
    year.value--;
  } else {
    month.value--;
  }
  emit("calClick", year.value + "-" + month.value);
}
function handleNext() {
  active.value = null;
  data.value = [];
  if (month.value == 12) {
    month.value = 1;
    year.value++;
  } else {
    month.value++;
  }
  emit("calClick", year.value + "-" + month.value);
}
function handleYear(e) {
  active.value = null;
  year.value += e;
}
function chack(e) {}

onMounted(() => {
  getInitDate();
  data.value = props.list;
});
</script>

<style lang="scss" scoped>
.calender {
  height: calc(100% - 80px);
  // overflow-y: scroll;
  .date-header {
    padding: 12px 0;
  }
  .btn-month {
    display: flex;
    justify-content: center;
    .show-date {
      font-size: 18px;
      margin: 0 24px;
    }
  }
  .date-content {
    .week-header {
      display: flex;
      justify-content: center;
      > div {
        width: 13%;
        text-align: center;
        padding: 10px 0;
        border-left: 1px solid #266ff8;
        border-top: 1px solid #266ff8;
      }
      > div:nth-child(7) {
        border-right: 1px solid #266ff8;
      }
    }
    .week-day {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      > div:nth-child(7n) {
        border-right: 1px solid #266ff8;
      }
      > div:nth-child(36),
      > div:nth-child(37),
      > div:nth-child(38),
      > div:nth-child(39),
      > div:nth-child(40),
      > div:nth-child(41),
      > div:nth-child(42) {
        border-bottom: 1px solid #266ff8;
      }
      > div {
        border-left: 1px solid #266ff8;
        border-top: 1px solid #266ff8;
        width: 13%;
        min-height: 10vh;
        .btn_day {
          text-align: center;
          .tit {
            font-size: 16px;
            margin: 0 50px;
            line-height: 2em;
            padding: 0 16px;
            border-radius: 4px;
          }
          .time {
            line-height: 2em;
          }
        }
      }
      .other-day,
      .other-day {
        color: #858585;
        // height: 11vh;
      }
      .day {
        display: block;
        padding: 4px;
        text-align: right;
      }
      .active {
        position: relative;
      }
      .active::after {
        content: "当天";
        position: absolute;
        top: 0;
        left: 0;
        background: rgb(63, 128, 248);
        padding: 4px;
        border-radius: 0 0 8px 0;
      }
    }
  }
}
</style>