辰小白小白最近在寫日曆模板，專案已經用了element元件，奈何element日曆元件官方文件提供的資料實在太少了。所以這裡希望有相關開發需要的朋友能夠少走一些辰小白踩過的坑。

首先展示一些模板效果圖：

這個專案的詳細介紹可以下辰小白的這篇文章：後端開發的福音，vue+element實現的vue-element-admin前臺框架，開箱即用

下面是日曆模板首頁原始碼

<template>
 <div>
  <el-card class="_calendar">
   <el-container>
    <el-main>
     <el-card>
      <el-calendar v-model="value" :first-day-of-week="7">
       <!-- 這裡使用的是 2.5 slot 語法，對於新專案請使用 2.6 slot 語法-->
       <template slot="dateCell" slot-scope="{date,data}">
        <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
         <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          <i
           :class="[data.isSelected ?'el-icon-check':'']"
          ></i>
          <i v-if="_.indexOf(isArrange,data.day)>0" class="el-icon-s-claim"></i>
          <!-- <i class="el-icon-coffee-cup"></i> -->
         </p>
        </div>
       </template>
      </el-calendar>
     </el-card>
    </el-main>
 
    <el-aside width="40%" style="overflow: hidden;">
     <el-card>
      <div class="el-calendar__header">
       <div class="el-calendar__title">排班詳情</div>
       <div class="el-calendar__button-group">
        <div class="el-button-group">
         <button
          type="button"
          class="el-button el-button--plain el-button--mini"
          @click="saveOnClick"
         >
          <span>新增</span>
         </button>
        </div>
       </div>
      </div>
      <div class="calendar-info">
       <div style="padding: 15px;">
        <div role="alert" class="el-alert el-alert--success is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-success is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span>
          <p class="el-alert__description">值班人員：張三、李四、王五</p>
          <p class="el-alert__description">攜帶裝置：123547、985431、745481</p>
          <i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--info is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-info is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">2020-06-19 9:00~11:00（待稽核）</span>
          <p class="el-alert__description">值班人員：張三、李四、王五</p>
          <p class="el-alert__description">攜帶裝置：123547、985431、745481</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--warning is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-warning is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">警告提示的文案</span>
          <p class="el-alert__description">文字說明文字說明文字說明文字說明文字說明文字說明</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--error is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-error is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">錯誤提示的文案</span>
          <p class="el-alert__description">文字說明文字說明文字說明文字說明文字說明文字說明</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
       </div>
      </div>
     </el-card>
    </el-aside>
   </el-container>
  </el-card>
  <calendarDrawer ref="calendarDrawer"></calendarDrawer>
  <calendarForm ref="calendarForm"></calendarForm>
 </div>
</template>
<script>
import calendarDrawer from "./calendar-drawer.vue";
import calendarForm from "./calendar-form.vue";
export default {
 components: { calendarDrawer,calendarForm },data: function() {
  return {
   value: new Date(),isArrange: [
    "2020-06-08","2020-06-09","2020-06-10","2020-06-11","2020-06-17","2020-06-18"
   ]
  };
 },created: function() {
  this.$nextTick(() => {
   // 點選前一個月
   let prevBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(1)"
   );
   prevBtn.addEventListener("click",e => {
    console.log(this.data);
    this.$notify({
     title: "上一月",message: "上個月頭天：" + this.value,type: "success",position: "top-left"
    });
   });
 
   //點選下一個月
   let nextBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(3)"
   );
   nextBtn.addEventListener("click",() => {
    console.log(this.value);
    this.$notify({
     title: "下一月",message: "下個月頭天：" + this.value,type: "warning",position: "top-left"
    });
   });
 
   //點選今天
   let todayBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(2)"
   );
   todayBtn.addEventListener("click",() => {
    this.$notify.info({
     title: "今天",message: "今天：" + this.value,position: "top-left"
    });
   });
  });
 },mounted: function() {},methods: {
  //點選日期塊
  calendarOnClick(e) {
   console.log(e);
   // this.isArrange.push("2020-06-19");
   this.$notify.error({
    title: "日曆塊點選",message: e,position: "top-left"
   });
  },//點選資訊塊
  infoOnClick() {
   this.$refs.calendarDrawer.drawer = true;
  },//新增排班
  saveOnClick() {
   this.$refs.calendarForm.dialogFormVisible = true;
  },//刪除排班
  infoDel() {
   this.$confirm("此操作將永久刪除該排班,是否繼續?","提示",{
    confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"
   })
    .then(() => {
     this.$message({
      type: "success",message: "刪除成功!"
     });
    })
    .catch(() => {
     this.$message({
      type: "info",message: "已取消刪除"
     });
    });
  }
 }
};
</script>
<style scoped>
.is-selected {
 color: #1989fa;
}
.p-popover {
 text-align: center;
}
._calendar {
 height: 99.5%;
 width: 100%;
}
.el-main {
 padding: 0px;
 overflow: hidden;
}
.calendar-info {
 height: 94%;
 overflow: auto;
}
.el-alert {
 margin: 15px 0px;
}
.el-alert:hover {
 transform: scale(1.02);
}
.el-alert:active {
 transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
 height: 125px;
 box-sizing: border-box;
 padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
 padding: 0px;
 height: 125px;
}
._calendar .el-container,._calendar .el-calendar {
 height: 100%;
}
._calendar .el-card__body {
 padding: 0px;
}
</style>

具體的幾個點選事件都有備註，這裡不細說了

到此這篇關於element日曆calendar元件上月、今天、下月、日曆塊點選事件及模板原始碼的文章就介紹到這了,更多相關element calendar元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！