vue框架学习 -- 日历控件 FullCalendar 使用总结

最近在项目中要实现日期排班的功能，正好要用到日历视图的控件，经过对比发现，vue 中 使用 FullCalendar 可以实现相关需求，下面对使用过程做一个总结。

一. 引入 FullCalendar 控件

package.json 中添加相关依赖

"dependencies": {"@fullcalendar/bootstrap5": "^6.1.15","@fullcalendar/core": "^6.1.15","@fullcalendar/daygrid": "^6.1.15","@fullcalendar/interaction": "^6.1.15","@fullcalendar/list": "^6.1.15","@fullcalendar/timegrid": "^6.1.15","@fullcalendar/vue": "^6.1.15",}

二. 页面中引入 FullCalendar

<template><div class="common-list"><!-- 日历控件 --><div ><FullCalendar :options="calendarOptions" /></div></div>
</template>

相应的 javascript 方法说明

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import { formatDate} from '@/utils'
import {listDutyPlanCalendar,
} from "@/api/duty/zbrl";
export default {components: {FullCalendar // make the <FullCalendar> tag available},data() {return {// 搜索参数queryParams: {pageNum: 1,pageSize: 100,startDate: '',endDate: '',},// 日历配置calendarOptions: {plugins: [dayGridPlugin, interactionPlugin, bootstrap5Plugin, listPlugin, timeGridPlugin],locale: 'zh-cn',themeSystem: 'bootstrap5',headerToolbar: {end: 'today prev next dayGridMonth dayGridWeek',},// 周一从星期一开始，0为星期日// firstDay: 1,buttonText: {today: '今天',month: '月',week: '周'},// 在日历的初始化完成后执行的事件datesSet: this.handleDateChange,/*customButtons: {myCustomButton: {text: 'custom!',click: function() {alert('Clicked the custom button in v6!');}}},*/views: ['dayGridMonth', 'dayGridWeek', 'dayGridDay'],initialView: 'dayGridMonth',//日期点击事件dateClick: this.handleDateClick,events: [{ title: 'event 1', date: '2024-09-01'},{ title: 'event 2', date: '2024-09-01' },{ title: 'event 3', date: '2024-09-03' },],// 添加事件点击处理eventClick: function(info) {// 这里是点击事件时执行的代码// alert('你点击了事件: ' + info.event.title);// 你可以在这里执行更多逻辑，比如打开模态框显示事件详情},}}},created() {this.handleQuery();},methods: {//查询接口数据handleQuery() {listDutyPlanCalendar(this.queryParams).then(res => {if(res.code === 200){this.calendarOptions.events = res.rows;}console.log(res)console.log(this.calendarOptions.events)});},// 当日历的日期范围发生变化时,监听事件handleDateChange(info) {if(this.queryParams){console.log(this.queryParams.startDate)this.queryParams.startDate = formatDate(info.start).substring(0, 10);this.queryParams.endDate = formatDate(info.end).substring(0, 10);this.handleQuery();}// 当日历的日期范围发生变化时（包括翻页操作），这个函数会被调用// console.log('新的日期范围:', info.startStr, '到', info.endStr);},resetQuery() { },//某个日期点击监听方法handleDateClick(arg) {console.log(arg)alert('date click! ' + arg.dateStr)},}
}
</script>

三. 最终页面实现效果

四. 功能点实现总结

1. calendarOptions 详解

FullCalendar 的 calendarOptions 是一个非常重要的配置项，它包含了初始化 FullCalendar 日历所需的各种设置和参数。以下是对 calendarOptions 中一些常见属性的详细解析：

1. 插件列表（plugins）

作用：定义 FullCalendar 需要加载的插件。FullCalendar 的许多功能都是通过插件来实现的。
示例：

plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin]

这里加载了日视图（dayGridPlugin）、时间网格视图（timeGridPlugin）和交互插件（interactionPlugin），后者允许用户拖拽、缩放等交互操作。

2. 默认视图（initialView）

作用：设置日历初始化时显示的视图。
示例：

initialView: 'dayGridMonth'

这将日历的初始视图设置为月视图，并以日网格（dayGrid）的形式展示。

3. 语言（locale）

作用：设置日历的语言。FullCalendar 支持多种语言，通过设置 locale 属性可以实现界面的国际化。
示例：

locale: 'zh-cn'

这将日历的语言设置为中文。

4. 头部工具栏（headerToolbar）

作用：自定义日历头部的工具栏布局和按钮。
示例：

headerToolbar: {  left: 'today prev,next',  center: 'title',  right: 'dayGridMonth,timeGridWeek,timeGridDay'  
}

这将在日历头部左侧放置“今天”、“上一个”、“下一个”按钮，中间显示标题，右侧放置月视图、周视图和日视图的切换按钮。

5. 按钮文本（buttonText）

作用：自定义头部工具栏中各按钮的显示文本。
示例：

buttonText: {  today: '今天',  month: '月',  week: '周',  day: '日',  prev: '‹',  next: '›'  
}

这将把头部工具栏中的按钮文本替换为中文或自定义符号。

6. 周起始日（firstDay）

作用：设置一周中哪一天作为起始日。FullCalendar 默认周日为一周的开始，但可以通过此属性进行自定义。
示例：

firstDay: 1

这将把周一设置为一周的开始（注意：FullCalendar 中周日是 0，周一是 1，以此类推）。

7. 事件（events）

作用：定义日历中要展示的事件数组。每个事件对象可以包含日期、标题、描述等信息。
示例：

events: [  { title: '事件1', date: '2024-09-28' },  { title: '事件2', start: '2024-09-29T10:00:00', end: '2024-09-29T12:00:00' }  
]

8. 其他常用属性

aspectRatio：设置日历单元格的宽高比。
eventColor：设置所有日历事件的背景颜色。
editable：是否允许用户通过拖拽、缩放等方式修改事件。
selectable：是否允许用户选择日历上的日期范围。
eventClick：点击事件时触发的回调函数。
dateClick：点击日期时触发的回调函数。

2. 日历中添加 日期点击事件

//日期点击事件dateClick: this.handleDateClick,