经手的需求，有一个功能是以月为单位进行值班的安排与查询，具体如图，每一天都能点击显示员工列表进行操作，当天已经安排过的，值班信息显示在日历上
vue-full-calendar这个插件有很多文章，但大多是移动端，满足我需要的更是一个都没有，无奈只能自己东拼西凑试了很多方法，结果还不错，达到了预期，特意整理一下过程，希望能使跟我有同样需求的小伙伴少走几步弯路
demo指路 https://github.com/sunhuihuibuhui/demo-for-vue-full-calendar欢迎star、fork，笔芯~
安装：npm i vue-full-calendar
在main.js中全局引入：
或者在需要用到的组件中局部引入，需要注册和引入样式：
使用：
config是日历的基本配置
events是事件，即第一张图上的值班信息
event-selected是事件的点击事件，day-click是当天日期的点击事件，两个事件的参数写在方法中了
第一张图左上角可以根据日期查询，但是日期跟calendar插件是分离的，所以点击查询按钮的时候需要调用calendar的gotoDate方法，参数是选中的月份，格式是YYYY-MM
calendar主要用到的就这么多，动态添加事件有一个专门的方法如下
但是项目中我没用到，我是直接在created的时候获取值班数据，然后push到events中的。
demo再次指路 https://github.com/sunhuihuibuhui/demo-for-vue-full-calendar再次欢迎star、fork，再次笔芯~~
其它的一些api可以参考这个文档 https://www.helloweba.net/javascript/445.html
绝大部分都是适用的，也可以留言问我，因为当时时间比较充裕，我试了很多在项目中并没有用到的方法，后来删掉了所以整理的时候就都没有放上来
415更新：添加了增加和修改信息，很小的一个点更新在github中了，就不在此放代码了
网友评论