4dkankan-components/docs/examples/calendar/header.vue

<template>
    <el-calendar ref="calendar">
        <template #header="{ date }">
            <span>Custom header content</span>
            <span>{{ date }}</span>
            <el-button-group>
                <el-button size="small" @click="selectDate('prev-year')"> Previous Year </el-button>
                <el-button size="small" @click="selectDate('prev-month')"> Previous Month </el-button>
                <el-button size="small" @click="selectDate('today')">Today</el-button>
                <el-button size="small" @click="selectDate('next-month')"> Next Month </el-button>
                <el-button size="small" @click="selectDate('next-year')"> Next Year </el-button>
            </el-button-group>
        </template>
    </el-calendar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const calendar = ref()
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
}
</script>