FullCalendar - 开源的多功能 JavaScript 日历插件
本文字数:747 字 9图
阅读完需:约 4 分钟
点击上方“青年码农”关注
回复“源码”可获取各种资料
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
相关文章
- JavaScript如何将Unit8Array图片数据转换为JPG图片
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- javascript编程单线程之异步模式Asynchronous
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- 五个最热门的开源机器学习 JavaScript 框架
- 冒泡算法的三种JavaScript表示
- javascript学习随笔(使用window和frame)的技巧
- javascript跟随滚动条滚动的层(浮动AD效果)
- Javascript更新JavaScript数组的uniq方法
- 用php+javascript实现二级级联菜单的制作
- javascript新手语法小结
- JavaScript全面解析各种浏览器网页中的JS执行顺序
- javascript定时自动切换的选项卡Tab
- javascript设置某DIV区域内的checkbox复选框
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- javascript中注册和移除事件的4种方式
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- javascript数组操作方法小结和3个属性详细介绍
- JavaScript中伪协议javascript:使用探讨
- Javascript基础教程之JavaScript语法