<template>
|
<el-calendar ref="calendar">
|
<template #header="{ date }">
|
<span>日历视图</span>
|
<span>{{ date }}</span>
|
<el-button-group>
|
<el-button size="small" @click="selectDate('prev-year')">
|
Previous Year1
|
</el-button>
|
<el-button size="small" @click="selectDate('prev-month')">
|
Previous Month1
|
</el-button>
|
<el-button size="small" @click="selectDate('today')">Today</el-button>
|
<el-button size="small" @click="selectDate('next-month')">
|
Next Month1
|
</el-button>
|
<el-button size="small" @click="selectDate('next-year')">
|
Next Year
|
</el-button>
|
</el-button-group>
|
</template>
|
<template #date-cell="{ data }">
|
<p :class="data.isSelected ? 'is-selected' : ''">
|
{{ data.day.split('-').slice(1).join('-') }} <br/>
|
工作日
|
{{ data.isSelected ? '✔️' : '' }}
|
</p>
|
</template>
|
</el-calendar>
|
</template>
|
<script setup>
|
const calendar = ref()
|
const selectDate = (val) => {
|
if (!calendar.value) return
|
calendar.value.selectDate(val)
|
}
|
const isToday = (date) => {
|
const today = new Date();
|
return date.getDate() === today.getDate() &&
|
date.getMonth() === today.getMonth() &&
|
date.getFullYear() === today.getFullYear();
|
};
|
</script>
|
<style lang="scss" scoped>
|
.is-selected {
|
color: #1989fa;
|
}
|
</style>
|
