最近在项目中要实现日期排班的功能,正好要用到日历视图的控件,经过对比发现,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,