一、npm 安装 Fullcalendar及相关插件

npm i --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list说明:
@fullcalendar/vue    FullCalendar 的 vue 组件
@fullcalendar/daygrid    月视图插件(按需安装)
@fullcalendar/timegrid    周视图和日视图插件(按需安装)
@fullcalendar/interaction    接口插件(按需安装)
@fullcalendar/list    日程视图插件(按需安装)

二、引入并使用

<template><FullCalendarref="fullcalendar":options='calendarOptions'><template v-slot:eventContent='arg'><b>{{ arg.timeText }}</b><i>{{ arg.event.title }}</i></template></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'export default {components: {FullCalendar // make the <FullCalendar> tag available},data: function() {return {calendarOptions: {plugins: [    //配置日历插件dayGridPlugin,timeGridPlugin,interactionPlugin,// needed for dateClicklistPlugin ],//其他一些相关配置}}
}
</script>

三、使用 FullCalendar提供的接口

1. 给 FullCalendar 配置 ref属性

<FullCalendar ref="fullcalendar" :options='calendarOptions'>

2. 通过 ref 和 getApi() 调用 Fullcalendar 中的方法

this.$refs.fullcalendar.getApi().gotoDate('2021')

具体配置信息和接口信息可参考以下链接：

官方文档：http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文档翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

FullCalendar中文文档：API_Hesper_Pan的博客-CSDN博客_fullcalendar

Vue中使用Fullcalendar思路相关推荐

vue中使用FullCalendar日历组件
官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址: ...
vue中使用FullCalendar日历插件
文章目录前言一.FullCalendar兼容二.使用步骤 1.引入库 2.载入使用总结前言因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...
Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
在Vue中引入fullcalendar制作课程表
最近在做项目中用到了FullCalendar来实现课程表功能,在此记录一下该库简单用法以下为效果图想看项目具体实现可前往我的github 安装 FullCalendar的功能被分解为"插 ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
vue中通过post方式异步上传文件
功能需求: 根据后台接口需求,需通过异步的方式post提交上传文件,并根据返回的信息作出相应的提示.页面已提前写好了,如下: 思路分析: 1.创建一个FormData空对象,然后使用append方法添 ...

Vue中使用Fullcalendar思路

一、npm 安装 Fullcalendar及相关插件

二、引入并使用

三、使用 FullCalendar提供的接口

1. 给 FullCalendar 配置 ref属性

2. 通过 ref 和 getApi() 调用 Fullcalendar 中的方法

Vue中使用Fullcalendar思路相关推荐

最新文章

热门文章