日程表组件FullCalendar(V4.4.1)使用小结

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 '@fullcalendar/core/main.css';
</style>

3.组件基础API

`plugins`	日程表依赖的插件
`defaultView`	日程表加载时的初始视图
`datesRender`	callback，当日程表时间变动时触发
`events`	日程表的事件数据源

对@datesRender绑定数据请求事件可以在每次时间变动时实时刷新当前events

`selectAllow`	callback，判断当前日程块能否选择
`eventAllow`	callback，判断当前事件块能否选择
`select`	callback，当选择日程块时触发
`eventClick`	callback，当点击事件块时触发
`eventResize`	callback，当拖动事件块时间范围时触发
`eventDrop`	callback，当拖拽事件块移动时触发

此外还有一些格式化API，具体参考官网就不在此罗列了

4.注意事项

我绑定的events是一个数组，数组内对象的一些key是必须的

          {title: '张三 拔牙',  //展示在日程表上的事件块标题start: '2020-06-08 10:00:00',  //日程表事件的开始时间end: '2020-06-08 11:30:00',  //日程表事件的结束时间color: 'orange',  //填充色editable: false,  //能否编辑extendedProps: {name: '张三', id: 123, sex: 1,...}  //额外属性，可以用来存储原始的数据源以便数据处理},

event的dom事件非常丰富，点击、选择和拖拽能满足大部分需求，

结合弹窗组件（如element的Dialog对话框），可以实现数据实时修改的需求。

动图如下：

官方文档真的很详细，一定要仔细阅读

日程表组件FullCalendar(V4.4.1)使用小结相关推荐

vue日程安排_在Vue项目中用fullcalendar制作日程表的示例代码
前言最近老牌日历插件fullcalendar更新了v4版本,而且添加了vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图: 安装 fullcalendar的功能被 ...
mixin机制 vue_vue mixins组件复用的几种方式（小结）
最近在做项目的时候,研究了mixins,此功能有妙处.用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似.我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? ...
vue 搜索框header_在Vue框架下使用Fullcalendar
原标题:在Vue框架下使用Fullcalendar Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接.本站之前有很多文章介绍了F ...
php日程增删改查,使用Fullcalendar管理日程事件(增删改查拖放)
新版Fullcalendar(v4)拥有丰富的选项方法事件配置以及插件应用,对开发者非常友好,开发者可以轻松的利用Fullcalendar定制一个完美的日程安排应用,本文将讲解最实际的日程事件管理前后 ...
vue日程安排_使用Fullcalendar管理时间计划调度安排
原标题:使用Fullcalendar管理时间计划调度安排 Fullcalendar可以很好的管理日程安排事件,可以管理时间和任务调度,比如日常值班岗位安排.举办活动会议议程安排.项目行动安排.车间劳动 ...
react-router 从 v2/v3 to v4 迁移（翻译）
react-router v4 是完全重写的,所以没有简单的迁移方式,这份指南将为您提供一些步骤,以帮助您了解如何升级应用程序. 注意: 这份迁移指南适用于react-router v2和v3,但为简 ...
日程管理 FullCalendar
日程管理,采用著名组件FullCalendar日历插件实现 FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发 1.实 ...
美团是用html开发,剖析美团网站前端的组件化开发经验
前言一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着前端开发复杂度的日益提升,组件化开发应运而 ...
Vue中使用Fullcalendar思路
一.npm 安装 Fullcalendar及相关插件 npm i --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegr ...

日程表组件FullCalendar(V4.4.1)使用小结

日程表组件FullCalendar(V4.4.1)使用小结相关推荐

最新文章

热门文章