el-calendar 日历做排班、值班、打卡.......

效果图；

功能: 新增、修改
直接上代码说明：el-calendar 修改源码；

渲染层代码（el-calendar）

<div class="calendar">
    <el-calendar >
      <template slot="dateCell" slot-scope="{date,data}">
        <!--自定义内容
	1、先判断时间，进行颜色改变
	2、渲染先做好初始化格式，再循环渲染需要值班日期参数判断渲染
	3、点击事件区分两个（必须禁止冒泡）：未值班点击事件，已有直班点击事件；
	-->
        <div :style="{color: time-86400000 > new Date(date).getTime() ? '#ccc':''}">
          <div class="calendar-day" slot="reference"  @click.stop="onClickDate(data.day,new Date(date).getTime(),$event)">
            {{ data.day.split('-').slice(2).join('-') }}
            <div v-for="(item,index) in attendanceDetailsData" :key="index" slot="reference" @click.stop="onClick(item,data.day,new Date(date).getTime(),$event )">
              <div v-if="data.day == item.time" style="height: 59px;margin-top: -23px;padding: 23px 0 0 6px;font-size: 12px;text-align: center;"> 
                <p >{{data.day == item.time ? item.doctorName : ''}} </p>
                <p >{{data.day == item.time ? item.doctorPhone : ''}} </p>
                <span  v-if="data.day === Time" >值班</span>
              </div>
          </div>
          </div>
        </div>
      </template>
    </el-calendar>
</div>

修改效果

修改代码（使用el-dropdown）

 <div class='tooltipEchartHeader' v-if="visible" :style="{ left: floatLeft, top: floatTop }" >
      <el-dropdown :show-timeout='10'>
        <span class="box">
        </span>
        <el-dropdown-menu slot="dropdown" align="center" >
            <el-dropdown-item v-for="item in userList"
          :key="item.userId" @click.native="handleCommand(item.userId)">{{item.realName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

data() {
    return {
      titleName:'',
      dateTime:'',
      floatLeft:0,
      floatTop:0,
      visible:false,
      time:Date.now(),
      attendanceDetailsData:[],//排班列表
      userList:[],//医生
      ruleForm:{},
      addForm:{},//填表
      Time:this.TimeDate()
    };
  },

点击事件（监听（上个月–今天–下个月））

//监听（上个月--今天--下个月）
created() {
    this.$nextTick(() => {
    // 点击上一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        this.visible=false;
      });
      
      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.visible=false;
      });
      
      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.visible=false;
      });
    });
  },

methods: {
    handleCommand(val) {
      let Time = this.TimeDate();
      this.addForm.doctorId = val;
      this.addForm.time = this.dateTime;
      this.$request(scheduleSave, this.addForm).then((res) => {
        if (res.code === 0) {
          if (this.addForm.id) {
            this.$util.message("suc", "修改排班成功");
            this.getList();
            this.visible=false;
            if(this.dateTime === Time){
              this.$store.dispatch("downNumFn")
            }
          } else {
            this.$util.message("suc", "新增排班成功");
            this.getList();
            this.visible=false;
            if(this.dateTime === Time){
              this.$store.dispatch("downNumFn")
            }
          }
        }
      });
    },
    TimeDate() {
      let time = new Date();
      var year = time.getFullYear(); //得到年份
      var month = time.getMonth() + 1; //得到月份
      var date = time.getDate(); //得到日期
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      return year + "-" + month + "-" + date;
    },
    getList(){
      this.$request(scheduleList, this.ruleForm).then((res) => {
        if(res.code === 0){
          this.attendanceDetailsData = res.data;
        }
      })
    },
    onClick(val,data,eleTime,e){
      this.titleName=data + '修改排班';
      this.dateTime=data;
      if(this.time-86400000 < eleTime){
        console.log('sck')
        this.visible=true;
      }else{
        this.visible=false;
      }
      console.log(val)
      this.floatLeft = e.clientX -50+ "px"; // 减去外层div的left距离
      this.floatTop = e.clientY -22 + "px";
      this.conceal=true;
      this.addForm =this.$util.superCopy(val) ;
      this.addForm.doctorId = Number(this.addForm.doctorId)
    },
    onClickDate(data,eleTime,e){
      this.floatLeft = e.clientX -50+ "px"; // 减去外层div的left距离
      this.floatTop = e.clientY -22 + "px";
      this.titleName=data + '新增排班';
      this.dateTime=data;
      console.log(this.time-86400000)
      if(this.time-86400000 <eleTime){
        this.visible=true;
      }else{
        this.visible=false;
      }
        this.conceal=true;
        this.addForm ={};
    },
  },