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

举报
青年码农 发表于 2022/08/25 00:58:09 2022/08/25
【摘要】 本文字数:747 字 9图 阅读完需:约 4 分钟 点击上方“青年码农”关注 回复“源码”可获取各种资料 FullCalendar 是一个支持 React、Vue、Angular 和原生 JavaScript 的日历插件,FullCalendar 拥有超过 300 种设置,支持模块化导入,几乎可以实现任何效果。 ...

本文字数:747 字 9图

阅读完需:约 4 分钟

点击上方“青年码农”关注

回复“源码”可获取各种资料

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

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

ebfd244c7a7f936a60ebc15235ec82f8.png

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

一 安装

先安装核心依赖

yarn add @fullcalendar/vue @fullcalendar/core

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

二 插件

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

3732a7f18047907c5eb230903688262d.png

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

ba5497483f7362e2e91b5e6dfb6e0cb3.png

三 使用

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

b7d33865af9ef99228f1c09740be16fa.png

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

0c82f818f181712355a080e46373d41a.png

最后使用 FullCalendar 

43b8a745c45c3bfd36286f0e74079432.png

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

85bdb86ad89e274149833df7ef614707.png

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

c5c577714472edb0567b9b4062a9106c.png

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

0a53d7d6692dc965cf4130f83e6e1275.png

四 参考资料

官方:https://fullcalendar.io/

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

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

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

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/126357727

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。