日历看板 element日历组件

日历看板需求
日历展示分为两个维度月，日。在日历上每一天显示该天待办事项，点击事项跳转到该事项详细页面。可以查看上一月，下一月，上一天，下一天。
难点：以日维度的展示，element日历组件没有展示每一天的，需要仿照element日历组件自己实现。
页面大概功能实现了，具体对接口取数据，细节样式之后在加
效果

具体实现
贴下大概功能实现的代码
月 没什么特别的，element日历组件自定义内容

<el-button size="mini" @click="handleMonth">月</el-button>
<el-button size="mini" @click="handleData">日</el-button>
<!-- 月 -->
<el-calendar v-if="select === 'month'">
  <template slot="dateCell" slot-scope="{date, data}">
    <div class="posi">
      <p class="abs">{{ data.day.split('-').slice(2).join('-') }}</p>
      <el-button size="mini" type="warning" @click="handleRouter(data)"
        >待办事项</el-button
      >
    </div>
  </template>
</el-calendar>

日
实现的时候也是骚操作，本来想着用element日历中自定义范围数组直接设置为一天，后来发现最短范围也要一周。

没办法日维度的只能自己实现。
我是首先用日历组件自定义范围设置为一周，打开浏览器控制台，定位到日历的elements元素，复制，粘贴，结构有了，最后把页面写死的改为变量。

<!-- 日 -->
<div class="el-calendar__body" v-if="select === 'date'">
  <div class="el-calendar__header">
    <div class="el-calendar__title">{{forDate}}</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="handleBefore(newDate)"
        >
          <span> 上一天 </span></button
        ><button
          type="button"
          class="el-button el-button--plain el-button--mini"
          @click="newDate=new Date().getDay()"
        >
          <span> 今天 </span></button
        ><button
          type="button"
          class="el-button el-button--plain el-button--mini"
          @click="handleAfter(newDate)"
        >
          <span> 下一天 </span>
        </button>
      </div>
    </div>
  </div>
  <table
    cellspacing="0"
    cellpadding="0"
    class="el-calendar-table is-range"
  >
    <thead>
      <th>{{"周"+"日一二三四五六".charAt(newDate)}}</th>
    </thead>
    <tbody>
      <tr class="el-calendar-table__row">
        <td class="current">
          <div class="el-calendar-day">
            <div class="posi">
              <el-button
                size="mini"
                type="warning"
                @click="handleRouter()"
                >待办事项</el-button
              >
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

data() {
  return {
    select: 'month',
    newDate: new Date().getDay(), //当天周几，要注意的是周日为0
    forDate: moment().format('YYYY年MM月DD日'), //moment时间格式化，需要引入
  }
},
methods: {
  // 跳转待办
  handleRouter(val) {
    console.log(val)
  },
  // 月
  handleMonth(data) {
    this.select = 'month'
  },
  // 日
  handleData() {
    this.select = 'date'
  },
  // 上一天
  handleBefore(val) {
    if (val == 0) {
      this.newDate = 6
    } else {
      this.newDate = val - 1
    }
  },
  // 下一天
  handleAfter(val) {
    if (val == 6) {
      this.newDate = 0
    } else {
      this.newDate = val + 1
    }
  },
},

new Date().getDay()获取当天星期几，要注意的是周日为0,
"周"+"日一二三四五六".charAt(new Date().getDay())转换为周一这样的格式