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

朱雀 2022-11-04 15:22 1207阅读 0赞

#### 写在前面 ####

> elementui在使用日历也就是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;
          },

##### 打印结果![在这里插入图片描述][2021030311111528.png] #####

#### 注意的点 ####

> valueData这个参数就是我们data中定义的，也就是需要我们在return中定义**valueData: new Date()**,然后我们的Calendar calendar控件将其绑定才可以自动计算每个月份，代码如下：

<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>

#### 结束 ####

> 具体每一个时间块上怎么显示，点击事件什么这里就不写了，第一是官方有，第二是自己也比较容易实现，这里需要说一个点，官方给的参数用好的话可以事半功倍，\{ type, isSelected, day\}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd  
> [组件地址][Link 1]

[2021030311111528.png]: /images/20221023/749e4eedf80148b0bcbe8c72fcc489ce.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/calendar