element-ui 日历组件calendar 自定义使用

官方文档：https://element.eleme.cn/#/zh-CN/component/calendar

官方文档描述过的我就不赘述了，最近做的项目有一个日历展示的功能，在此做一个记录。

element-ui版本：^2.12.0

效果图：

 

关键代码如下： 

<el-calendar v-model="value" id="calendar">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
       slot="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:['2019-11-02'],things:['去公园野炊','看星星','看月亮']},{date:['2019-11-15'],things:['看电影']}]

样式就看自己所需了

 

如有问题，欢迎交流~！