自定义 FullCalendar v5 + Vue2

说明

FullCalendar 版本为 5.x,Vue 版本为 2.x

主要内容

  • 去除默认 headerToolbar,自定义工具栏;
  • 任意月份跳转,可返回当前月份;
  • 添加事件;
  • 查看事件详情(点击)

效果

自定义 FullCalendar v5 + Vue2_第1张图片

自定义 FullCalendar v5 + Vue2_第2张图片

代码

为了理解和使用,合并简化了代码。主功能流程简洁明了,可根据实际需求场景 DIY。

代码中时间格式化选用 day.js,可根据项目更改时间格式化方法

引入依赖

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

Calendar.vue





在页面中使用 Calendar.vue 组件

xxx.vue



你可能感兴趣的:(自定义 FullCalendar v5 + Vue2)