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

最新推荐文章于 2025-03-30 23:15:24 发布

种麦南山下

最新推荐文章于 2025-03-30 23:15:24 发布

阅读量8.5k

点赞数 4

分类专栏： element

本文链接：https://blog.youkuaiyun.com/conving/article/details/106717853

版权

element 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Element UI的日历组件，并通过自定义日期单元格展示特定日期的相关事件，包括电影、野炊等活动，以及如何通过日历显示特定日期的备注，如放假、交电费等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子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.youkuaiyun.com/weixin_42447659/article/details/103354632