fullcalendar 一款 star高达12.6K+ 基于jQuery实现的管理日程安排、工作计划的日历工具。今天给大家分享如何在Vue框架下使用FullCalendar。
![723a80bcd8c04becda70b0ead22035c6.png](https://i-blog.csdnimg.cn/blog_migrate/4d3caf3b909ec0a621c7b7577a4806ef.jpeg)
fullcalendar-vue 基于FullCalendar.js的Vue版本实现。支持增删改查及拖拽式管理日程安排。
![be630551e2d032cc0a0ffe24bcb01e8a.gif](https://i-blog.csdnimg.cn/blog_migrate/333918736ba510b15401ddadb585eb8d.gif)
安装
$ npm i @fullcalendar/vue @fullcalendar/daygrid -S
使用插件
![035c5e077aa2a975deaef3f4ee990ce5.png](https://i-blog.csdnimg.cn/blog_migrate/04cb64e545d19495202b0bc1e1c1a52f.jpeg)
![ee4bbfc56ee738e36089c64b7c412dc8.png](https://i-blog.csdnimg.cn/blog_migrate/ef69764c64e010eb905bd583a7e72631.jpeg)
![05e42dfb64a0bab6fb0d1175fc153575.png](https://i-blog.csdnimg.cn/blog_migrate/f813cda5cb0c80a9de1fef6e8c36380c.jpeg)
Fullcalendar官网还提供了在React和Angular框架下使用方法。
- react版本
https://fullcalendar.io/docs/reacthttps://github.com/fullcalendar/fullcalendar-react
- angular版本
https://fullcalendar.io/docs/angularhttps://github.com/fullcalendar/fullcalendar-angular
![20dea49dde0b8a4d1e8d0c105588bdf2.png](https://i-blog.csdnimg.cn/blog_migrate/e5cc638cc8a3aed492d87c4aa042284a.jpeg)
![9c25c495de72c6bb09a4bb1d59bc8c71.png](https://i-blog.csdnimg.cn/blog_migrate/e09dc86c38c2421eb13fc26ada3facfa.jpeg)
# fullcalendar文档https://fullcalendar.io/https://www.helloweba.net/search.html?keys=fullcalendar# 项目地址https://github.com/fullcalendar/fullcalendar
最后附上fullcalendar的vue版本项目地址
# 文档地址https://fullcalendar.io/docs/vue# 仓库地址https://github.com/fullcalendar/fullcalendar-vue
ok,就介绍到这里。感兴趣的可以去看下哈,欢迎一起交流讨论!