日历

src/views/calendar/agenda/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <ContentWrap>
+    <el-calendar ref="calendar" class="custom-calendar">
+      <template #header = "{date}">
+        <el-row>
+          <el-col :span="8" style="text-align: center;">
+            <span style="display: inline-block;font-size: 10px">{{ date }}</span>
+          </el-col>
+          <el-col :span="8" style="text-align: center;">
+            1
+          </el-col>
+          <el-col :span="8" style="text-align: center;">
+            <el-button-group style="display: flex; justify-content: space-between;">
+              <el-button size="small" @click="selectDate('prev-year')">上年</el-button>
+              <el-button size="small" @click="selectDate('prev-month')">上月</el-button>
+              <el-button size="small" @click="selectDate('today')">今天</el-button>
+              <el-button size="small" @click="selectDate('next-year')">下年</el-button>
+              <el-button size="small" @click="selectDate('next-month')">下月</el-button>
+            </el-button-group>
+          </el-col>
+        </el-row>
+      </template>
+    </el-calendar>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+
+import {CalendarDateType, CalendarInstance} from "element-plus";
+
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>