vue-full-calendar的使用(pc端日历样式的记事本)

经手的需求,有一个功能是以月为单位进行值班的安排与查询,具体如图,每一天都能点击显示员工列表进行操作,当天已经安排过的,值班信息显示在日历上

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中了,就不在此放代码了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容