系列教程之ElementUI Calendar日曆使用例子

例子1：

<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>

例子2：

<el-calendar>
     <!-- 這裏使用的是 2.5 slot 語法，對於新項目請使用 2.6 slot 語法-->
     <template
         slot="dateCell"
         slot-scope="{date, data}">
         <p> <!--這裏原本有動態綁定的class，去掉-->
            {{ data.day.split('-').slice(1).join('-') }}<br /> {{dealMyDate(data.day)}}
         </p>
     </template>
</el-calendar>



<script>
export default {
    data() {
        return {
            resDate: [
                {"date":"2019-12-20","content":"放假"},
                {"date":"2019-12-26","content":"去交電費"},
                {"date":"2019-11-26","content":"去學習vue"}
            ]
        }
    },
    methods:{
        dealMyDate(v) {
            console.log(v)
            let len = this.resDate.length
            let res = ""
            for(let i=0; i<len; i++){
                if(this.resDate[i].date == v) {
                    res = this.resDate[i].content
                    break
                }
            }
            return res
        }
    }
}
</script>

參考：

https://www.cnblogs.com/bobo1/p/12106366.html

https://blog.csdn.net/weixin_42447659/article/details/103354632