自定义|自定义 FullCalendar v5 + Vue2 自定义FullCalendarv5+Vue2

说明
FullCalendar 版本为 5.x，Vue 版本为 2.x
主要内容

去除默认 headerToolbar，自定义工具栏；
任意月份跳转，可返回当前月份；
添加事件；
查看事件详情（点击）

效果

文章图片

文章图片

代码

为了理解和使用，合并简化了代码。主功能流程简洁明了，可根据实际需求场景 DIY。
代码中时间格式化选用 day.js，可根据项目更改时间格式化方法

引入依赖

$ npm i @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/vue

Calendar.vue

.toolbar-boxer { display: flex; flex-direction: row; justify-content: space-between; }.toolbar-right { text-align: right; }.calendar { margin-top: 1rem; }.margin-left { margin-left: 1rem; }

在页面中使用 Calendar.vue 组件
【自定义|自定义 FullCalendar v5 + Vue2】xxx.vue

自定义|自定义 FullCalendar v5 + Vue2

推荐阅读

蒸米糕的制作方法和过程视频蒸米糕的制作方法

诗赋颂终南|诗赋颂终南笔墨写太平用这样方式表达对秦岭的厚爱

精华液的正确使用顺序

对2018全国最幸福的城市和县级城市评选结果你怎么看？

王者荣耀s18赛季进入末期,官方公布了各个段位的玩家分布,你能从中发现哪些内容？

刑事过失损坏电力设备案的公安立案追诉标准是如何规定

mongodb聚合查询索引性能分析 mongodb聚集查询？

佳能相机是全画幅吗佳能全画幅怎么样

观赏鱼如何养水质好观赏鱼如何养水

如何在思科设备上搭建FTP服务器？思科ftp服务器怎么搭建

python类中函数变量 python函数变量类型

绿萝生小黑苍蝇是什么虫

iqoo|2000-4000元价位选什么手机比较好？

最有名的钻戒是哪个品牌钻戒哪个牌子好

如何拆下戴尔服务器的面板？戴尔服务器面板怎么拆下来

什么型号的cpu好 cpu哪个最好

毛豆有哪些功效毛豆的营养价值是什么

拼多多助力代刷为什么流量起不来拼多多助力如何代刷

关于win10电脑无法新建文件夹怎样解决

本文教你如何取消电脑开机密码