快捷導(dǎo)航

elementui?el-calendar日歷組件使用示例

更新時(shí)間：2023年12月01日 14:18:27 作者：瑞瑞_

這篇文章主要為大家介紹了elementui?el-calendar日歷組件使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

需要在日歷基礎(chǔ)上展示每天排班記錄及排班詳情、當(dāng)天是否有異常情況。完成效果：

elementui自帶切換月份按鈕與設(shè)計(jì)圖不符，所以我隱藏了插件自帶的按鈕，自己加了個(gè)左右切換圖標(biāo)，代碼如下：

// 隱藏組件自帶切換月份按鈕
::v-deep.el-calendar .el-calendar__button-group{
   display: none;
}

在html中新增
<!-- 日歷兩側(cè)年月切換 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />

具體代碼實(shí)現(xiàn)

html

<!-- 日歷兩側(cè)年月切換 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />
<!-- 日歷 -->
<el-calendar v-model="calendarVal">
  <template slot="dateCell" slot-scope="{date, data}">
    <div @click="viewDetail(data.day)">
      <div class="date">{{ data.day.slice(8) }}</div>
      <div v-for="item in schedulingData.schedulingHandle">
        <div v-if="item.date == data.day">
          <!-- 是否異常 -->
          <div class="abnormal-state" v-if="item.hasException === true"></div>
          <!-- 排版情況 === memberAmount：根據(jù)是否有值班成員判斷是否排班;isPast：日期是否已過；isToday：是否是今天  -->
          <div class="scheduling-state scheduling-state-notset" v-if="item.memberAmount === 0">
            <img src="../../../../assets/img/scheduling/scheduling-state1.png">
            <span class="f14">未排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering1" v-if="item.memberAmount > 0 && item.isPast === true && item.isToday === false">
            <img src="../../../../assets/img/scheduling/scheduling-state2.png">
            <span class="f14">已排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering2" v-if="item.memberAmount > 0 && item.isToday === true">
            <img src="../../../../assets/img/scheduling/scheduling-state3.png">
            <span class="f14">已排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering3" v-if="item.memberAmount > 0 && item.isPast === false && item.isToday === false">
            <img src="../../../../assets/img/scheduling/scheduling-state4.png">
             <span class="f14">已排</span>
          </div>
          <!-- 當(dāng)日排班情況彈窗 -->
          <div class="today-scheduling-detail" v-if="item.showTodayScheduling">
            <div class="today-scheduling-title">當(dāng)日排班</div>
            <div class="today-scheduling-center">
              <div class="today-scheduling-item" v-for="item1 in item.todayDetail">
                <div class="name1">{{ item1.shiftName }}</div>
                <div class="name2">{{ item1.crewName }}</div>
              </div>
            </div>
            <div class="today-scheduling-footer">
              <div class="edit"><span class="el-icon-edit"></span>編輯</div>
              <div class="view"><span class="el-icon-view"></span>查看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</el-calendar>
<div class="back-to-today" @click="dateCut(5)">回到今天</div>

js

dateCut(type) {
  // type：1 月份左側(cè)按鈕，2 月份右側(cè)按鈕，3 年份左側(cè)按鈕，4 年份右側(cè)按鈕，5 回到今天
  if (type === 1) {
    this.calendarVal = new Date(this.calendarVal).getMonth() > 0 ?
      new Date(this.calendarVal).getFullYear() + '-' + new Date(this.calendarVal).getMonth() + '-01' :
      new Date(this.calendarVal).getFullYear() - 1 + '-12' + '-01'
  } else if (type === 2) {
    this.calendarVal = new Date(this.calendarVal).getMonth() < 11 ?
      new Date(this.calendarVal).getFullYear() + '-' + (Number(new Date(this.calendarVal).getMonth()) + 2) + '-01' :
      new Date(this.calendarVal).getFullYear() + 1 + '-01' + '-01'
  } else if (type === 3) {
    this.calendarVal = new Date(this.calendarVal).getFullYear() - 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
  } else if (type === 4) {
     this.calendarVal = new Date(this.calendarVal).getFullYear() + 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
  } else if (type === 5) {
     this.calendarVal = this.getDate(new Date()).fullDate
  }
  this.getData() // 調(diào)接口數(shù)據(jù)
},

css代碼

// 日歷組件樣式修改
  .is-selected {
    color: #1989FA;
  }
  ::v-deep.el-calendar{
    height: calc(100% - 35px);
  }
  ::v-deep.el-calendar .el-calendar__body{
    padding-bottom: 16px;
    height: calc(100% - 80px);
  }
  ::v-deep.el-calendar .el-calendar-table{
    height: 100%;
  }
  .el-backtop, ::v-deep.el-calendar .el-calendar-table td.is-today .date{
    //background: #5E97F9;
    //box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
    //color: #fff;
    background: #DCE9FF;
    color: rgba(0,0,0,0.45);
  }
  .el-backtop, ::v-deep.el-calendar .el-calendar-table .date:hover{
    background: #DCE9FF;
    color: rgba(0,0,0,0.45);
  }
  ::v-deep.el-calendar .el-calendar-table .el-calendar-day:hover{
    background: none;
  }
  ::v-deep.el-calendar .el-calendar-table td.is-selected{
    background: none;
  }
  ::v-deep.el-calendar .el-calendar-table td.is-selected .date{
    background: #5E97F9;
    box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
    color: #fff;
  }
  ::v-deep.el-calendar .el-calendar__button-group{
    display: none;
  }
  ::v-deep.el-calendar .el-calendar__title{
    margin: 0 auto;
  }
  ::v-deep.el-calendar .el-calendar-table .el-calendar-day{
    position: relative;
  }

日歷組件就完成了，有任何問題歡迎大家留言！

以上就是elementui el-calendar日歷組件使用示例的詳細(xì)內(nèi)容，更多關(guān)于elementui el-calendar日歷組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: