我在项目中用到的vue FullCalendar的内置函数以及配置项

 <FullCalendar v-if="isLoadingSucess":class="[$style.calenderDetail]" :options="calendarOptions" ref="FullCalendar"/>

// 切换到下一月/周/日
this.$refs.FullCalendar.getApi().next()
// 切换到上一月/周/日
this.$refs.FullCalendar.getApi().prev()
// 跳转到今天
this.$refs.FullCalendar.getApi().today()
// 跳转到指定日期  formatData是日期 格式为 yyyy-MM-dd
// 特别注意不要写例如 2021-8-7 必须是 2021-08-07  两位!!!
this.$refs.FullCalendar.getApi().gotoDate(formatData)
// 获得当前视图起始位置的日期
this.$refs.FullCalendar.getApi().getDate()
// 获得当前视图的一些参数 比如type 是当前视图的类型
this.$refs.FullCalendar.getApi().view
// 向日历中添加事项
this.$refs.FullCalendar.getApi().view.calendar.addEvent({id: 1,title: `事项xx`,start: '2021-10-01' + ' 13:00:00',end: '2021-10-01' + ' 17:00:00',// 修改背景颜色backgroundColor:'#d8377a',// 修改边框颜色borderColor:'#d8377a',
})

data() {let that = thisreturn {createEventId: 0,calendarOptions: {plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],// 视图类型initialView: 'timeGridWeek',// 语言选项locale:'zh-cn',// 设置各种默认按钮的文字 没使用自定义按钮 并且 不需要在按钮添加自己的代码就直接用这个改一下显示文字就行buttonText:{today:'今天',month:'月',week:'周',day:'日',list:'表'},// 自定义头部按钮 因为要加一些自己的内容   自带的按钮未找到回调函数customButtons:{prevBack: {text: '后退',click: function(data) {that.$refs.FullCalendar.getApi().prev()// 自动一些内容}},prevGo: {text: '前进',click: function(data) {that.$refs.FullCalendar.getApi().next()// 自动一些内容}},ToToday: {text: '今天',click: function(data) {that.$refs.FullCalendar.getApi().today()// 自动一些内容}},},// 头部显示的功能 自定义按钮就显示在这headerToolbar: {left: 'prevBack,prevGo ToToday',center: 'title',right: 'dayGridMonth,timeGridWeek',},// 初始化的事件initialEvents: [],// 是否可拖拽// editable: true,// 是否可选择添加// selectable: true,selectMirror: true,dayMaxEvents: true,weekends: true,// 选择时触发函数select: this.handleDateSelect,// 点击事件触发函数eventClick: this.handleEventClick,// 移动到事件上触发函数eventMouseEnter:this.handleEventMouseover,// 移动事件或者拓展事件时间触发函数eventsSet: this.handleEvents,// 全天行 的文本显示内容allDayText: '全天',// 是否显示全天allDaySlot: true,// 最小时间slotMinTime:'06:00:00',// 最大时间slotMaxTime:'21:00:00',},}},

我在项目中用到的vue FullCalendar的内置函数以及配置项相关推荐

Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数
一.MUI资源索引及MUI介绍 1,资源索引官网:http://dev.dcloud.net.cn/mui/ MUI官方文档:http://dev.dcloud.net.cn/mui/ui/ 调用手 ...
Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...
vue 路由的内置组件 router-view 详细介绍（有图有真相）
介绍当你的地址符合我的路由要求的时候,会把路由的组件在你的界面中呈现,而这个界面实在 App.vue里面当你打开 App.vue就会在里面发现这两个组件这两个是 vue 给你提供的两个 vue ...
Vue常用的内置指令的底层细节分析
上一篇文章我们知道了指令的实现原理,接下来我们来研究下Vue提供的一些默认指令的实现原理. v-text 使用案例 <div v-text="'value'" 实现逻辑先来 ...
mysql pmod项目_内置函数 - 数学函数 - 《Apache Doris 文档(201812)》 - 书栈网 · BookStack...
数学函数 abs(double a) 功能: 返回参数的绝对值返回类型:double类型使用说明:使用该函数需要确保函数的返回值是整数. acos(double a) 功能: 返回参数的反余弦值 ...
在python中用递归的方法编程_python基础之函数，递归，内置函数
阅读目录一数学定义的函数与python中的函数初中数学函数定义:一般的,在一个变化过程中,如果有两个变量x和y,并且对于x的每一个确定的值,y都有唯一确定的值与其对应,那么我们就把x称为自变量, ...
Spark团队开源新项目MLflow发布0.2版本，内置TensorFlow集成
译者 | 无明编辑 | Natalie AI 前线导读: 在今年的 Spark+AI 峰会上,Spark 团队推出了 MLflow,一个开源的用于简化机器学习生命周期的平台.从首次发布到现在的三周时 ...

我在项目中用到的vue FullCalendar的内置函数以及配置项

我在项目中用到的vue FullCalendar的内置函数以及配置项相关推荐

最新文章

热门文章