FullCalendar是一款功能强大,用法简单的js日程表组件,目前已支持React,Vue和Angular三大主流框架。最近Vue项目需要在日程表进行数据的增删改查,通过官方文档和demo顺利完成,在此特意记录下使用FullCalendar(V4.4.1)的踩坑过程。
1.组件下载
FullCalendar属于用啥下啥模式,官网罗列了各组件包详情,支持Package,zip和CDN三种下载方式,直接npm下载
npm install --save @fullcalendar/vue @fullcalendar/interaction @fullcalendar/timegrid
core、vue等提供核心类,interaction提供事件,daygrid、timegrid等则提供不同的日程表类型
2.组件注册
引入js和css文件,在vue内注册组件。
注意:FullCalendar的drag事件似乎依赖于jqueryUI,如需则记得一并引入(未引入之前drag无效)
<script>
import FullCalendar from '@fullcalendar/vue'
export default {
components: {
FullCalendar
},
}
</script>
<style scoped>
@import '@fu