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

这篇具有很好参考价值的文章主要介绍了element-ui日历组件el-calendar选中特定时间以及样式修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

el-badge

具体效果如下图所示：

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

页面标签：

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

参考地址文章来源地址https://www.toymoban.com/news/detail-504855.html

到了这里，关于element-ui日历组件el-calendar选中特定时间以及样式修改的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！