Calendar calendar控件的月份添加点击事件

写在前面

添加事件

• 在created的钩子函数中实现如下代码

this.$nextTick(() => {
        // 点击上个月
        let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
        // 点击今天
        let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
        currBtn.addEventListener('click', () => {
         console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
        // 点击下个月
        let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
        nextBtn.addEventListener('click', () => {
         console.info(this.valueData)
         this.dateFormat('YYYY-mm-dd',this.valueData)
        })
      })

时间格式化代码

     /**
       * @param {Object} fmt 需要的时间格式 例如：'YYYY-mm-dd'
       * @param {Object} date  格林尼治时间 
       */
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(), // 年
          "m+": (date.getMonth() + 1).toString(), // 月
          "d+": date.getDate().toString(), // 日
          "H+": date.getHours().toString(), // 时
          "M+": date.getMinutes().toString(), // 分
          "S+": date.getSeconds().toString() // 秒
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      },

打印结果

注意的点

<el-calendar v-model='valueData' v-loading="loading" style="margin-top: 10px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div class="currCalendarSty" @dblclick="calendarOnClick(data,date)">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
              <el-row :gutter="20">
                <el-col :span="12" v-for="item in schdules[data.day]" :key="item.id" class="text item">
                  <div style="display: flex;flex-direction: column;justify-items: center;align-items: flex-start">
                    <div style="font-weight: bold">{{item.shifts !==null ? item.shifts.name : '未设置班次'}}</div>
                    <div>{{item.useralias}}
                      <el-tag v-if="item.user_status && item.user_status!==' '" size="mini" type="success">{{item.user_status}}</el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
        </template>
 </el-calendar>

结束