前言

因为要实现一个类似任务日历的功能，于是翻看了vue创造的日历组件发现不能符合要求的，所以又找了几个满足要求的日历组件。例如：calendar、react-big-calendar。
但查遍了百度发现基本没人用calendar，偶尔一两个也不是基于vue的，且官方文档也没有给出vue的实例，对不懂英语的搬运工及其不友好。
而react-big-calendar是专门为react开发而开发的，自然也找不到搬迁到vue的文章。
于是就经过多方查询，终于从茫茫人海中翻出了FullCalendar。

ps：2022/8/31 发现一个vue的FullCalendar封装插件：vue-lunar-full-calendar。但本博文已使用官方提供的插件，有兴趣的小伙伴可以自行了解。
vue-lunar-full-calendar文档

FullCalendar官方文档很友好的给了vue示例，甚至在github上最新的vite+typesript+vue3示例都有，属实牛逼。

一、FullCalendar兼容

FullCalendar 与Vue JavaScript 框架无缝集成。它提供了一个与 FullCalendar 标准 API 的功能完全匹配的组件。
最新版本的 FullCalendar 兼容 Firefox、Chrome、Safari、Edge 和 IE 11+。

二、使用步骤

1.引入库

代码如下（本文示例以vue2为主，vue3请前往官网查看示例）：

npm install @fullcalendar/daygrid
npm install @fullcalendar/interaction
npm install @fullcalendar/timegrid
npm install @fullcalendar/vue
npm install style-loader

直接一串下载

npm install @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid @fullcalendar/vue style-loader

2.载入使用

代码如下：

JS部分，暂时只写一些基础事件，足够看到效果。其他属性还没用过以后会补上。

// 在日历页面引入组件及插件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'// 注册组件，定义基本数据
export default {components: {FullCalendar // make the <FullCalendar> tag available},data(){return(){options:{locale:'zh-ch', // 中文展示，顶部title会转化为星期一、星期二的样式plugins: [ // 组件需要的插件（可根据需求引入）dayGridPlugin,timeGridPlugin,interactionPlugin ],headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'},/* initialEvents:[{ //此方法适用于不变数据的渲染，如果需要动态的替换数据，请适用eventsid:'1',title:'数据源',strart:'2022-08-26', //在日历组件上开始的时间end:'2022-08-31' // 在日历组件上结束的时间}], *///events:此值接受json,数组等任何键值对的数据结构，修改的方式是简单粗暴的直接赋值，列：this.options.events = [];events:[], select:this.handleDateSelect, // 选中日历表格事件eventClick:this.handleEventClick, //选中数据源标事件eventsSet:this.handleEvents //初始化日历事件}}}
},

html部分

<template><FullCalendarclass='demo-app-calendar':options='calendarOptions'><template v-slot:eventContent='arg'><b>{{ arg.timeText }}</b><i>{{ arg.event.title }}</i></template></FullCalendar>
</template>

总结

例如：以上就是FullCalendar在vue中的基础应用，最好还是直接下载官方示例使用，本文也会随我的使用持续更新FullCalendar的用法。有事没事的小帅哥，靓女们点个关注谢谢啦。

vue中使用FullCalendar日历插件相关推荐

Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
vue中使用FullCalendar日历组件
官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址: ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果文章目录前言一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光时间:2013-09-15 13:53 标签: FullCalendar 日历文档 FullCa ...
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

vue中使用FullCalendar日历插件

文章目录

前言

一、FullCalendar兼容

二、使用步骤

1.引入库

2.载入使用

总结

vue中使用FullCalendar日历插件相关推荐

最新文章

热门文章