<template>
<div>
<a-calendar :defaultValue="currentTime" @select="onSelectFn" @panelChange="onPanelChangeFn">
<ul slot="dateCellRender" slot-scope="value" class="events">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge :status="item.type" :text="item.content" />
</li>
</ul>
<template slot="monthCellRender" slot-scope="value">
<div v-if="getMonthData(value)" class="notes-month">
<section>{{ getMonthData(value) }}</section>
<span>Backlog number</span>
</div>
</template>
</a-calendar>
</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
currentTime: moment(), //当前时间,日历是需要moment
returndata: [
{
data: "2021-11-25",
listData: [
{ type: "warning", content: "这是一个经过" },
{ type: "warning", content: "这是一个警告2" },
{ type: "warning", content: "这是一个经过3" },
],
},
{
data: "2021-11-28",
listData: [
{ type: "success", content: "123456798" },
{ type: "success", content: "8888" },
{ type: "success", content: "6666" },
],
},
],
};
},
methods: {
onSelectFn(value){
//实际使用可能会需要获取最新数据。
// console.log(value.format('YYYY-MM-DD'),"aaaa")
},
onPanelChangeFn(value){
// console.log(value,"bbbb")
},
getListData(value) {
// console.log(value.format('YYYY-MM-DD'))
// moment.js 时间格式化
// moment.date()==>日
// moment.format('YYYY-MM-DD')==>转为年月日的格式
// 参考https://www.cnblogs.com/zhang1f/p/14573552.html
let listData;
this.returndata.forEach((item) => {
if (item.data == value.format("YYYY-MM-DD")) {
listData=item.listData;
}
});
return listData || [];
},
getMonthData(value) {
if (value.month() === 8) {
return 1394;
}
},
},
mounted() {},
};
</script>
<style>
</style>
默认选中当天时间,展示的是returndata里面的数据,使用时可获取后端返回数据,格式也可根据需求更换。上述代码展示图如下: