Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<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>