element-ui日历组件el-calendar选中特定时间以及样式修改

最新推荐文章于 2024-06-05 09:18:45 发布

笑到世界都狼狈

最新推荐文章于 2024-06-05 09:18:45 发布

阅读量7.9k

点赞数 4

分类专栏： element-ui 文章标签： vue.js elementui el-calendar 标记特定时间修改日历样式

本文链接：https://blog.csdn.net/qq_36509946/article/details/129293858

版权

element-ui 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

项目开发中，有需要用到日历的组件，而且需要把某些日期标注起来，在这边标注的小红点我用了

el-badge

具体效果如下图所示：

页面标签：

<div class="data-analysis">
    <el-calendar v-model="calendarValue1">
       <!--选中小红点-->
          <template
             slot="dateCell"
             slot-scope="{date, data}"
          >
             <div>
               <div v-for="(item, key) in activeday" :key="key">
                  <el-badge v-if="data.day == item.dat" is-dot class="item"></el-badge>
               </div>
               <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
              </div>
           </template>
    </el-calendar>
</div>

变量声明：

// 日历
calendarValue1: new Date(),
activeday: [ // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
   { dat: '2023-03-21' },
   { dat: '2023-03-15' },
   { dat: '2023-03-05' }
],

样式修改：

<style lang='scss' scoped>
/*日历样式修改*/
.data-analysis /deep/  .el-calendar-table .el-calendar-day{
  width: 100%;
  height: 100%;
}
/*隐藏今天按钮*/
>>>.el-button-group>.el-button:not(:first-child):not(:last-child){
  display: none;
}
/*去掉原本背景颜色*/
.data-analysis >>>.el-calendar{
  background: transparent;
}
>>>.el-calendar-table td:hover{
  background: transparent;
}
/*去掉选中背景颜色*/
.data-analysis >>>.el-calendar-table td.is-selected{
  background: transparent;
}
/*修改每一小格大小*/
.data-analysis >>>.el-calendar-table .el-calendar-day{
  position: relative;
  padding: 10px;
}
/*小红点样式*/
.data-analysis >>>.el-badge{
  position: absolute;
  right: 5px;
  top: 5px;
}
/*日历边框颜色*/
.data-analysis >>>.el-calendar-table tr td:first-child{
  border-left: 1px solid #666666;
}
.data-analysis >>>.el-calendar-table tr:first-child td{
  border-top: 1px solid #666666;
}
.data-analysis >>>.el-calendar-table td{
  border-bottom: 1px solid #666666;
  border-right: 1px solid #666666;
}
/*表格周一到周日颜色*/
.data-analysis >>>.el-calendar-table thead th{
  color: #68a8d0;
}
/*头部日期颜色*/
.data-analysis >>>.el-calendar__title{
  color: #68a8d0;
}
/*头部下面的横线*/
.data-analysis >>>.el-calendar__header{
  border-bottom: 1px solid #666666;
}
/*鼠标悬停样式*/
.data-analysis >>>.el-calendar-table .el-calendar-day:hover{
  cursor: default;
  background: transparent;
}
/*非本月字体颜色*/
.data-analysis >>>.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev{
  color: #666666;
  cursor: pointer;
}
</style>

参考地址