潮州企业网站建设,八埏网站开发,合肥学习做网站,网站建设常州青之峰最近在项目中要实现日期排班的功能#xff0c;正好要用到日历视图的控件#xff0c;经过对比发现#xff0c;vue 中 使用 FullCalendar 可以实现相关需求#xff0c;下面对使用过程做一个总结。
一. 引入 FullCalendar 控件
package.json 中添加相关依赖
dependen…最近在项目中要实现日期排班的功能正好要用到日历视图的控件经过对比发现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
templatediv classcommon-list!-- 日历控件 --div FullCalendar :optionscalendarOptions //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/listimport 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,
