vue中使用FullCalendar日历组件-基礎知識庫-匯編語言學習筆記

vue中使用FullCalendar日历组件

2023-09-10 阅读 22 评论 0

摘要：官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址:https://www.helloweba.net/javascript/445.html 目前没有vue的中文文档在vue中安装fullcalendar npm install --save @fullcalendar/

官方地址:https://fullcalendar.io/
官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue
中文文档(jquery版本)地址:https://www.helloweba.net/javascript/445.html
目前没有vue的中文文档

在vue中安装fullcalendar

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

在项目中使用fullcalendar

import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'

下面的是根据需要什么视图就引入什么视图样式
样式请去官方的 https://fullcalendar.io/docs中的views中查看
在这里插入图片描述

import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

在export default 的 components中添加组件

  components: {FullCalendar},

引入后需要给fullcalendar进行配置

首先在fullcalendar的标签中使用options来给其添加配置项

<FullCalendar:options="calendarOptions" ref="FullCalendar"/>

calendarOptions的内容
具体的配置内容可以参考https://www.helloweba.net/javascript/445.html

calendarOptions: {// 加载的视图plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],// 视图类型 初始显示的视图 视图名称规则 比如dayGridPlugin去掉Plugin 加上Month或者Week或者DayinitialView: 'timeGridWeek',// 语言选项  设置为中文后 部分文本会替换为中文 但是不全面locale:'zh-cn',// 配置日历头部// 按钮: prev为切换(上)下一月(/周/日)   next today 跳转到今天    // 文本: title 年月(YYYY-MM)// 按钮: dayGridMonth月 timeGridWeek周 timeGridDay日headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay',},// 设置各种按钮的文字  默认是英文的buttonText:{today:'今天',month:'月',week:'周',day:'日',list:'表'},// 初始就存在的事件initialEvents: [{id: 1,title: `会议:xxxxxxxxx`,start: '2021-09-13' + 'T08:00:00',end: '2021-09-13' + 'T10:00:00',},{id: 2,title: `会议:xxxxxxxxx`,start: '2021-09-15'+ 'T10:00:00',end: '2021-09-15'+ 'T12:00:00',}],// 是否可拖拽editable: true,// 是否可选择添加selectable: true,// 选择时触发函数select: this.handleDateSelect,// 点击事项触发函数eventClick: this.handleEventClick,// 移动事项或者拓展事项时间触发函数eventsSet: this.handleEvents,// 全天行 的文本显示内容allDayText: '全天',// 最小时间slotMinTime:'07:00:00',// 最大时间slotMaxTime:'20:00:00',},

显示效果分别是
在这里插入图片描述

获得vue实例

通过官方提供的.getApi()方法
首先创建一个vue的实例 (ref ) FullCalendar

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

在通过this.$refs.FullCalendar.getApi() 就能获得到实例了

let calendarApi =  this.$refs.FullCalendar.getApi()
// gotoDate方法是让当前视图跳转到指定日期的位置
console.log('this.$refs.FullCalendar.getApi()',calendarApi.gotoDate('2021-08-10'))

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

通过这个实例获得的方法就和网上那些jquery中获得的函数一样,比如.fullCalendar( 'gotoDate', date )

 <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()
// 获得当前视图  里面有一些参数
this.$refs.FullCalendar.getApi().view
// 当前视图的类型
this.$refs.FullCalendar.getApi().view.type 
// 当前显示的事件(日程)的开始时
this.$refs.FullCalendar.getApi().view.activeStart
// 当前显示的事件(日程)的结束时
this.$refs.FullCalendar.getApi().view.activeEnd
// 这个应该是当前显示内容区域的日历引用 因为通过他可以获得内置的函数 (我也不确定 反正我是这么用的)
this.$refs.FullCalendar.getApi().view.calendar
// 获得当前所显示的所有事件(日程)
this.$refs.FullCalendar.getApi().view.calendar.getEvents()
// 向日历中添加事项
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',
})

对于需要重新刷新当前显示日历中的事件(日程)时

// 是需要先清除 当前显示的各个eventSource(事件源) 就是事件(日程)
this.$refs.FullCalendar.getApi().view.calendar.getEvents().forEach(eventSource => {eventSource.remove()
})
// 在将自己需要的内容加入  
// 如果是只添加一个事件其他不动的话就不需要清除

其他一些基本的日历设置

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',},}},