FullCalendar拖拽日历在vue中单个页面的使用方法

1.首先通过npm下载插

npm install --save @fullcalendar/vue @fullcalendar/daygrid

2.在vue单页面里引入以下文件

//引入日历插件
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

3.在vue单页面中注册组件

 components: {FullCalendar}

4.在vue单页面中的template模板中使用组件

<FullCalendar :options="calendarOptions" />

5.在vue的data>return里对日历组件进行配置，然后在上一步中引用注意calendarOptions变量是“=”还是“:”，项目不同会有所不同

calendarOptions={ //?拖拽日历配置plugins: [dayGridPlugin, interactionPlugin],initialView: 'dayGridMonth',locale: 'zh-cn', //? 配置中文selectable: true,//可编辑editable: true,//可拖拽height: 'auto',eventDrop: this.eventDrop, // ?拖拽事件header: {// 日历头部left: 'prev,next today',center: 'title',right: 'custom'},events: [//? 日历-预约事件{title: '高压氧仓预约',start: '2021-04-25',end: '2021-04-25'},{title: '高压氧仓预约',start: '2021-04-25', //开始时间end: '2021-04-25'  //结束时间}]};

6.效果下如图

FullCalendar拖拽日历在vue中单个页面的使用方法相关推荐

vue中城市页面的实现方法（带右侧字母滑动和点击）
需要引入的插件 npm install better-scroll --save npm install axios --save 父组件代码 <template><div>& ...
如何写一个拖拽日历组件（附源码）
作者简介 Kid 蚂蚁金服·数据体验技术团队本文会介绍如何写一个可拖拽日历组件,偏重点在于日历组件的功能挖掘以及对于开发过程的一些思考,编码部分会介绍核心部分的实现.代码在最后也会放出来给大家. 效 ...
created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
Vue中v-bind=“$attrs”的使用方法
$attrs 主要用于组件之间的隔代传值.例如有父组件A,子组件B,孙组件C 三个组件. 在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中 ...
html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...

FullCalendar拖拽日历在vue中单个页面的使用方法

FullCalendar拖拽日历在vue中单个页面的使用方法

FullCalendar拖拽日历在vue中单个页面的使用方法相关推荐

最新文章

热门文章