官方文档：/#/zh-CN/component/calendar
官方文档描述过的我就不赘述了，最近做的项目有一个日历展示的功能，在此做一个记录。
element-ui版本：^2.12.0
效果图：
关键代码如下：
<el-calendar v-model="value" id="calendar"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><templateslot="dateCell"slot-scope="{date, data}"><!--自定义内容--><div><div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div><div v-for="item in calendarData"><div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1"><div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1"><el-tooltip class="item" effect="dark" :content="item.things" placement="right"><div class="is-selected">{{item.things}}</div></el-tooltip></div><div v-else></div></div><div v-else></div></div></div></template></el-calendar><script>export default {name: "calendar",data(){return {calendarData: [{ months: ['09', '11'],days: ['15'],things: '看电影' },{ months: ['10', '11'], days: ['02'],things: '去公园野炊' },{ months: ['11'], days: ['02'],things: '看星星' },{ months: ['11'], days: ['02'],things: '看月亮' } ],value: new Date()}}}</script><style>.calendar-day{text-align: center;color: #202535;line-height: 30px;font-size: 12px;}.is-selected{color: #F8A535;font-size: 10px;margin-top: 5px;}#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{content: '当月';}</style>
1、日历的中的日期是字符串，所以数据格式里的月份和日也是字符串；也可以都转换成int型
2、可以根据自己数据格式判断显示式，例如：[{date:['-11-02'],things:['去公园野炊','看星星','看月亮']},{date:['-11-15'],things:['看电影']}]
样式就看自己所需了
如有问题，欢迎交流~！
