FullCalendar - 开源的多功能 JavaScript 日历插件

FullCalendar 是一个支持 React、Vue、Angular 和原生 JavaScript 的日历插件,FullCalendar 拥有超过 300 种设置,支持模块化导入,几乎可以实现任何效果

此教程是基于Vue2,FullCalendar 同时也支持 Vue3,文档在https://fullcalendar.io/docs/vue

官方指南提示不会深入介绍Vue的使用,需要自己根据示例和可运行的项目参考。

一 安装

先安装核心依赖

yarn add @fullcalendar/vue @fullcalendar/core

如果有需要其他插件,也可以通过 yarn 或者 npm 安装,官方提供插件列表(V5版本)

插件

下面这些是免费的插件,包含了大部分场景。

还有一些需要额外付费的插件。如timeline、timegrid、daygrid等插件

三 使用

新建一个Vue组件或者在原有组件上导入,这里我就用一个新的组件(HelloWord.vue)作为示例,方便查看。

导入了核心组件和一些扩展组件,在 components 中注册组件

最后使用 FullCalendar

运行项目,日历大概就是这个样子。

options 属性就是控制日历的关键。

这里面列举了部分属性和事件,需要更详细的api请看官方文档:https://fullcalendar.io/docs

四 参考资料

官方:https://fullcalendar.io/

文档:https://fullcalendar.io/docs

插件:https://fullcalendar.io/docs/plugin-index

Vue:https://fullcalendar.io/docs/vue

相关文章

Java中的String是不可变对象 在面向对象及函数编程语言中,不...
String, StringBuffer 和 StringBuilder 可变性 String不可变...
序列化:把对象转换为字节序列的过程称为对象的序列化. 反序...
先说结论,是对象!可以继续往下看 数组是不是对象 什么是对...
为什么浮点数 float 或 double 运算的时候会有精度丢失的风险...
面试题引入 这里引申出一个经典问题,看下面代码 Integer a ...