CSS 修改el-calendar的样式,自定义样式

需求:自定义elementui的日历的样式;给符合条件的时间展示红点。

elementui的原始样式: 

目标样式:

 

代码实现:

html:

<el-calendar v-model="calendarValue">
  <template slot="dateCell" slot-scope="{date, data}">
    <div :class="data.isSelected ? '' : ''" class="is-point">
      <span>{{ Number(data.day.split('-')[2]) }}</span>
      <i v-show="pointList.includes(data.day)" />
    </div>
  </template>
</el-calendar>

JS:

export default {
  name: 'Dashboard',
  data() {
    return {
      calendarValue: new Date(),
      pointList: ['2023-09-12', '2023-09-11', '2023-09-01'],
    }
  },
}

css: 

<style lang="scss" scoped>
::v-deep .el-calendar {
  padding-right: 17px;
  .el-calendar__header {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    line-height: 22px;
    border-bottom: 0;
  }
  .el-calendar__body {
    padding: 0px 0px 30px;
    thead {
      th {
        color: #7f2ca9;
        font-weight: 600;
        font-size: 14px;
      }
    }
    .el-calendar-table__row {
      td {
        border: 0;
        height: unset;
        border-radius: 50%;
        font-size: 13px;
      }
      .el-calendar-day {
        height: 33px;
        line-height: 37px;
        padding: 0;
        span {
          height: 24px;
          line-height: 24px;
          width: 24px;
          text-align: center;
          border-radius: 50%;
          display: inline-block;
        }
        &:hover {
          background-color: unset;
          span {
            background-color: #7f2ca91a;
            color: #7f2ca9;
          }
        }
      }
      .is-selected {
        background-color: unset;
        .el-calendar-day {
          span {
            background-color: #7f2ca9;
            color: #ffffff;
          }
        }
      }
    }
  }
  .is-point {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    i {
      margin-top: 1px;
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #ff0000;
      border-radius: 50%;
    }
  }
}
</style>

 在这里小记一下,主要也是为了保留一下这次的修改成果,方便以后使用

 

有个没改好的地方就是,右上角的选择上下月的按钮不好修改为左右箭头,所以那块就没做优化,大家要是有好方法可以让我借鉴借鉴,ui如下:

 文章来源地址https://www.uudwc.com/A/gVjnn/

原文地址:https://blog.csdn.net/qq_58340302/article/details/132882233

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年09月18日 00:17
下一篇 2023年09月18日 00:20