源代码
<template>
<div>
<h2>Date Template</h2>
<Calendar :selection="value" @selectionChange="value=$event" style="width:250px;height:250px">
<template slot-scope="{date}">
<span :class="{'sdc':isSpecialDate(date)}">{{date.getDate()}}</span>
</template>
</Calendar>
<p v-if="value">{{value | formatDate}}</p>
</div>
</template>
<script>
export default {
data() {
return {
value: new Date()
};
},
filters: {
formatDate(date) {
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
return [m, d, y].join("/");
}
},
methods: {
isSpecialDate(date) {
let day = date.getDate();
if (day == 10 || day == 20 || day == 30) {
return true;
} else {
return false;
}
}
}
};
</script>
<style>
.sdc {
background: red;
color: #fff;
padding: 5px;
border-radius: 50%;
}
</style>