javascript
<template>
<a-config-provider :locale="zhCN">
<a-calendar
:fullscreen="true"
:disabled-date="dateDisabled"
@panelChange="panelChange">
<!-- :headerRender="headerRender" -->
<div slot="headerRender" slot-scope="{ value, type, onChange, onTypeChange }" class="ant-fullcalendar-date" >
<div class="slotHeader" style="padding:15px 15px 40px 15px; textAlign: center; position: relative; ">
<div style="position: absolute;left: 15px;top: 20px;">
</div>
<div style="display: inline-block; textAlign: center;">
<Select style="width:200px" :value="moment(value).year()" @on-change="(year) =>{changeYear(value,year,onChange)}">
<Option v-for="item in yearOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select style="width:140px" :value="moment(value).month()" @on-change="(month) => {changeMonth(value,month,onChange)}">
<Option v-for="item in monthOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
<div style="position: absolute;right: 15px;top: 20px;">
<ButtonGroup>
<Button type="primary" @click="() => {prevMonth(value,onChange)}">
<Icon type="ios-arrow-back"></Icon>
</Button>
<Button type="primary" @click="() => {showTotay(value,onChange)}">本月</Button>
<Button type="primary" @click="()=> {nextMonth(value,onChange)}">
<Icon type="ios-arrow-forward"></Icon>
</Button>
</ButtonGroup>
</div>
</div>
</div>
<ul slot="dateCellRender" slot-scope="value" class="events">
<li
v-for="(row, index) in getListData(value)"
:key="row.formId"
class="li-item"
>
</li>
</ul>
</a-calendar>
</a-config-provider>
</template>
<script>
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
data() {
return {
zhCN,
yearOptions:[],
monthOptions:[],
}
},
methods: {
getMonthOptions() {
let monthOptions = []
for (let i = 0; i <= 11; i++) {
monthOptions.push({
label: `${i+1}月`,
value: i,
})
}
this.monthOptions = monthOptions
},
getYearOptions() {
let yearOptions = []
for (let i = 2020; i <= new Date().getFullYear()+5; i++) {
yearOptions.push({
label: `${i}年`,
value: i,
})
}
this.yearOptions = yearOptions
},
changeYear(value,newYear, onChange) {
const now = value.clone().year(newYear)
onChange(now)
},
changeMonth(value,selectedMonth, onChange) {
const newValue = value.clone()
newValue.month(parseInt(selectedMonth, 10))
onChange(newValue)
},
prevMonth(value, onChange) {
let newMonth = moment(value).subtract(1, 'months');
onChange(newMonth);
},
nextMonth(value, onChange) {
let newMonth = moment(value).add(1, 'months');
onChange(newMonth);
},
showTotay(value,onChange) {
const today = moment(new Date())
onChange(today)
},
}
</script>效果如下
