element-ui Calendar 官网链接
官网的只有一个基础的日历展示，但是提供了插槽，使得我们可以自定义日历单元格
dateCell scoped slot 参数
看效果
codepen在线预览调试
<el-calendar v-model="value"><template slot="dateCell" slot-scope="{date, data}"><div @click="handleClickDay(date, data)"><div>{{data.day.split('-').slice(2).join('')}}</div><div v-for="item in events"><div v-if="item.days.indexOf(data.day.split('-').slice(2).join('')) > -1 && item.months.indexOf(data.day.split('-')[1]) > -1"><div v-for="i in item.event">{{i}}</div></div></div></div></template></el-calendar>
data() {return {value: new Date(),events: [{months: ['06', '07'], days: ['09'], event: ['打球']},{months: ['06'], days: ['15'], event: ['看电影', '玩游戏']},{months: ['06'], days: ['18'], event: ['吃饭']},]}}
点击单元格获取数据
methods: {handleClickDay(date, data) {// "-06-18T00:00:00.000Z" // [Object, Object]// { // type: 'current-month', // 表示当前月份， 可选值有 prev-month，current-month，next-month// isSelected: 'false', // 表示是否被选中// day: '-06-18' // 当前日期// }}}
ps:
calendar组件插槽的data参数会返回当前每个单元格的日期字符串yyyy-MM-dd格式，数据源中也可以直接是完整的日期格式，避免转化。
