ele-calendar 日历组件使用

鱼丸蛋面

已于 2023-04-12 15:40:30 修改

阅读量748

点赞数 6

文章标签： vue

于 2023-04-12 15:38:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35558694/article/details/130107802

版权

文章介绍了如何在基于ElementUI的Vue项目中集成ele-calendar组件来创建一个可以展示标注的日历。通过安装ele-calendar和moment库，然后在模板中配置组件属性，如render-content、data、prop和disabled-date，实现日历的渲染和日期选择功能。此外，还展示了自定义渲染内容的方法，以及如何高亮显示特定日期。

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

最近项目中需要使用日历，并且是可以展示标注的，因为基于 Element UI，所以多方查找后使用了 ele-calendar 组件，话不多说，直接上代码：

安装：

npm install ele-calendar --save

npm install moment --save

<template>
  <div>
    <ele-calendar
      :render-content="renderContent"
      :data="datedef"
      :prop="prop"
      :disabled-date="disabledDate"
      highlight
      @pick="datePick"
    />
  </div>
</template>

<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
import moment from 'moment'
export default {
  components: {
    eleCalendar
  },
  data() {
    return {
      datedef: [
        { date: '2023-04-10' }
      ],
      prop: 'date',
      hasVideoDateList: ['2023-03-16', '2023-04-03', '2023-04-04'],
      disabledDate: time => {
        // 禁用今天之后的日期【当前天可选】
        return time.getTime() > Date.now()
      }
    }
  },

  methods: {
    renderContent(h, { defdate, ...parmas }) {
      // 把时间转成时间戳
      var imoment = moment(defdate)
      const dayStr = moment(imoment).locale('zh-cn').format('YYYY-MM-DD')
      if (this.hasVideoDateList.includes(dayStr)) {
        return (
          <div class='date hasVideo'>
            <div class='checked'>
              {imoment.date()}
            </div>
          </div>
        )
      } else {
        return (
          <div class='date'>
            <div class='checked'>
              {imoment.date()}
            </div>
          </div>
        )
      }
    },
    datePick(date, event, row, dome) {
      const dayStr = moment(imoment).locale('zh-cn').format('YYYY-MM-DD')
      if (this.hasVideoDateList.includes(dayStr)) {
        this.$set(this.datedef[0], 'date', dayStr)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .date {
  position: relative;
  height: 28px;
  line-height:22px;
  margin: 0 5px 5px;
  color: #2E4199;
  cursor: no-drop;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #6E7FB9;
  }
}
::v-deep .hasVideo {
  &.date {
    color: #ced4e7;
    cursor: pointer;
  }
  &::after {
    background: #2DCA3C;
  }
  &:hover {
    color: #409EFF;
  }
}
::v-deep .el-date-table-calendar {
  font-size: 14px;
  th {
    color: #6E7FB9;
    border-bottom: none;
  }
  td.next-month {
    color: #2E4199;
  }
  td.prev-month {
    color: #2E4199;
  }
  td.disabled {
    div {
      background: transparent;
      color: #2E4199;
    }
  }
  td.current:not(.disabled) {
    background: transparent;
    .checked {
      border-radius: 2px;
      border: 1px solid #1EA0FC;
      padding-bottom: 8px;
    }
  }
  td.available {
    &:hover {
      color: inherit;
    }
  }
}
::v-deep .el-date-picker-calendar__header {
  margin-bottom: 5px;
}
::v-deep .el-date-picker-calendar__header-label {
  color: #ced4e7;
}
::v-deep .el-picker-panel-calendar__icon-btn {
  color: #6E7FB9;
}
::v-deep .el-picker-panel-calendar {
  border: none;
  color: #ced4e7;
  background: transparent;
}
</style>

参考1

文档说明