自定义|自定义 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

推荐阅读

离群点分析应用,spss离群点分析

上海招聘网站有哪些上海招聘网站

win10电脑屏幕倒过来了解决方法

尼康AF-S DX 尼克尔 35mm f/1.8G 尼康afs1855

狗狗去抢年轻人的滑板玩，还知道助跑跳上去，这是在嘲讽人家吗？

u盘打开ghost,教您如何运用u盘打开盘自已手工ghost备份系统

减重记录2

同学生日送什么礼物好女大学同学生日送什么礼物好女

行车记录仪怎么安装走线行车记录仪怎么安装

iphone4|尼康衰落，iPhone背锅？

马齿苋会影响月经吗

软籽石榴吃了有什么好处

打卡Hello Kitty Sweet hellokitty主题餐厅

兴味怎么读拼音怎么写兴味怎么读

项目无法添加tomcat，如何修改项目的jdk版本，Java version 1.8 is not supported

菲斯曼锅炉怎么测算房间面积？

wav音乐在哪下载整轨的wav如何分割，wav整轨变分轨

小程序注册成功文案，小程序注册好了怎么开发

Flutter项目实战之Flutter_Gank

圣女果的保存方法圣女果的保存方式