vue-elementUi-Calendar前端日历插件折腾记

最近好不容易闲了下来，把之前写的vue的日历总结一下，贴出来，过程中深刻的理解到做事情一定要趁热打铁，速战速决，不要拖拖拉拉，否则不仅仅是自己就忘记了，而且很影响效率。不过重要的还是好记性不如烂笔头，写过的东西一定要记下来。

其中的moment.js为js的日期处理类库详情请看 moment.js 官网

注释：

Demo

fc will dispatch some events out.

You will be able to register your own stuff by using slots

最后需要改写一个大神，封装好了的，我只是拿来用加以修改,详情请看下文。

vue-fullCalendar.vue

客户需要查询上一个月的新增客户的功能。

为啥让我先选一号，然后再去选31号？太麻烦了，你们能不能做出这样：

直接选月份不香吗？

这个怎么办？似乎要做个转换，前端日期控件给的类型一般都是标准的date，那么怎么表达月份？或者这个需求其实要的是起始日期和结束日期，这又要怎么转换？

如果要做转换的话，那么是前端做还是后端做？

听说因为这些事情，前后端经常吵架。。。

这还只是按月查询，那么有没有按年查询的需求呢？

我一朋友和我说，后端不爱转的话，那么就前端转呗，有啥的。

当然也可以换过来说，前端不爱转的话，那么后端转呗，有啥的。

好吧，还是说点有用的，这种麻烦事前后端都不爱做，烦。这是人之常情，谁又愿意给自己找活干呢？

但是总是要做呀，不做的话，客户用的不方便。

先总结一下各方的需求。

直接使用 dayjs 来实现格式化， https://day.js.org/docs/zh-CN/display/format 。因为element-plus用的就是这个，我们就不引入其他库了，

这样就可以非常灵活了。按月查、按年查，设置开始结束都可以。

也就是说要把用户选择的一个日期，改成一个范围日期。还需要做点判断和转换才可以。

1.选择时间，获取对应数据，显示时间轴和时间点

2.时间点hover显示对应时间

3.整点时间显示

4.点击时间轴，选择对应的时间点

5.点击时间点，选择对应的时间点

6.拖动点，选择对应的时间点

7.限制拖动，及点击位置

1.框架：vue+axios

2.日期组件： Ant Design of Vue (也可以自己修改成其他日期组件)

3.日期格式化： moment

4.数据返回格式

---