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,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于PyQt5和SQLite的数据库操作程序

基于PyQt5和SQLite的数据库操作程序:功能解析 在现代办公和数据处理中,数据库操作是不可或缺的一部分。然而,传统的数据库管理工具往往界面复杂,操作繁琐,对于非专业人士来说存在一定的学习曲线。为了解决这个问题,我们开发了一款基于PyQt5和SQLite的数据库操作程序。该…

【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09;第二章 相对单位&#xff08;已完结&#xff09;第三章 文档流与盒模型&#xff08;已完结&#xff09;第四章 Flexbox 布局&#xff08;已…

.net Framework 4.6 WebAPI 使用Hangfire

C# 使用 Hangfire 第一章 .net Framework 4.6 WebAPI 使用Hangfire 文章目录 C# 使用 Hangfire前言一、hangfire是什么?二、hangfire的特点三、.net Framework 中hangfire的使用方法第一步:创建WebAPI控制器第二步:添加nuget包第三步 创建startup类新建项目startup类Startu…

python 实现Luhn (Mod 10)Algorithm算法

Luhn (Mod 10)Algorithm算法介绍 Luhn算法&#xff08;也称为“模10”或Mod 10算法&#xff09;是一种简单的校验和算法&#xff0c;主要用于验证身份识别码&#xff0c;如银行卡号、信用卡号、国际移动设备辨识码&#xff08;IMEI&#xff09;、美国国家提供商标识号码、加拿…

Rust 语言开发 ESP32C3 并在 Wokwi 电子模拟器上运行(esp-hal 非标准库、LCD1602、I2C)

文章目录 esp-rs 简介GithubRust 包仓库Rust 教程Wokwi 电子模拟器开发环境Rust 环境esp-rs 环境创建 ESP32C3 项目项目结构编译项目命令运行模拟器ESP32C3 烧录 esp-rs 简介 esp-rs 是一个专注于为 Espressif 系列芯片&#xff08;如 ESP32、ESP32-S2、ESP32-C3 等&#xff0…

TypeScript 算法手册 - 【冒泡排序】

文章目录 TypeScript 算法手册 - 冒泡排序1. 冒泡排序简介1.1 冒泡排序定义1.2 冒泡排序特点 2. 冒泡排序步骤过程拆解2.1 比较相邻元素2.2 交换元素2.3 重复过程 3. 冒泡排序的优化3.1 提前退出3.2 记录最后交换位置案例代码和动态图 4. 冒泡排序的优点5. 冒泡排序的缺点总结 …

Unity3D播放GIF图片使用Animation来制作动画

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、下载GIF动图,用PS制作导出帧动画图片👉二、使用Animation制作动画👉三、脚本控制动画播放👉壁纸分享👉总结👉前言 unity播放gif图片,本身是不支持的,但是可以使用其他方法来实现, 1.有一种使用System…

微信小程序hbuilderx+uniapp+Android 新农村综合风貌旅游展示平台

目录 项目介绍支持以下技术栈&#xff1a;具体实现截图HBuilderXuniappmysql数据库与主流编程语言java类核心代码部分展示登录的业务流程的顺序是&#xff1a;数据库设计性能分析操作可行性技术可行性系统安全性数据完整性软件测试详细视频演示源码获取方式 项目介绍 小程序端…

计算机网络:计算机网络概述 —— 网络拓扑结构

文章目录 网络拓扑总线型拓扑特点缺陷 星型拓扑特点缺陷 环型拓扑特点缺陷 网状型拓扑优点缺陷 树型拓扑特点缺陷 网络拓扑 网络拓扑指的是计算机网络中节点&#xff08;计算机、交换机、路由器等&#xff09;之间物理或逻辑连接的结构。网络拓扑定义了节点之间的布局、连接方…

Python Linux解压安装脚本

本脚本用于安装python3.x, 需要指定python版本&#xff0c;如12代表3.12 安装文件下载自 python-build-standalone 我下载的文件后缀是&#xff1a;-x86_64-unknown-linux-gnu-pgo-full.tar.zst&#xff0c;根据需要自行下载 注意&#xff1a;install_only或tar.gz包的目录没有…

JAVA基础语法 Day11

一、Set集合 Set特点&#xff1a;无序&#xff08;添加数据的顺序和获取出的数据顺序不一致&#xff09;&#xff0c;不重复&#xff0c;无索引 public class demo1 {public static void main(String[] args) {//1.创建一个集合//HashSet特点&#xff1a;无序&#xff0c;不重…

算法笔记(七)——哈希表

文章目录 两数之和判定是否互为字符重排存在重复元素存在重复元素 II字母异位词分组 哈希表&#xff1a;一种存储数据的容器&#xff1b; 可以快速查找某个元素&#xff0c;时间复杂度O(1)&#xff1b; 当频繁查找某一个数时&#xff0c;我们可以使用哈希表 创建一个容器&#…

SpringBoot使用EasyPoi根据模板导出word or pdf

1、导出效果 1.1 wrod 1.2 pdf 2、依赖 <!--word--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.3.0</version></dependency><dependency><groupId>cn.…

ESP32 Bluedroid 篇(1)—— ibeacon 广播

前言 前面我们已经了解了 ESP32 的 BLE 整体架构&#xff0c;现在我们开始实际学习一下Bluedroid 从机篇的广播和扫描。本文将会以 ble_ibeacon demo 为例子进行讲解&#xff0c;需要注意的一点是。ibeacon 分为两个部分&#xff0c;一个是作为广播者&#xff0c;一个是作为观…

[SQL] SQL语句注意事项

语法: SQL可以单行或者多行书写&#xff0c;以分号结尾SQL可以使用空格/缩进来增强语句的可读性不区分大小写&#xff0c;但是关键字建议使用大写&#xff0c;这也是一个良好的习惯。注释&#xff1a;单行注释: -- 或者 # &#xff0c;#是MySQL特有的&#xff0c;建议统一使用…

Unity中Socket_TCP异步连接,加入断线检测以及重连功能

1、服务端 using System; using System.Collections.Generic; using System.Text; #region 命名空间 using System.Net; using System.Net.Sockets; using System.Threading; using UnityEngine; #endregionnamespace AsynServerConsole {/// <summary>/// Tcp协议异步通…

项目-坦克大战学习-爆炸特效消除

对于爆炸特效的消除有个非常简单的想法&#xff0c;给爆炸类设置一个bool检测是否爆炸完成&#xff0c;初始为false在爆炸特效4图片索引处检测&#xff0c;如果索引为4&#xff08;所有图片播放完成&#xff09;那么将bool改为true public bool isboomfalse; if(index4) { …

C++(string类的实现)

1. 迭代器、返回capacity、返回size、判空、c_str、重载[]和clear的实现 string类的迭代器的功能就类似于一个指针&#xff0c;所以我们可以直接使用一个指针来实现迭代器&#xff0c;但如下图可见迭代器有两个&#xff0c;一个是指向的内容可以被修改&#xff0c;另一个则是指…

Swagger配置且添加小锁(asp.net)(笔记)

此博客是基于 asp.net core web api(.net core3.1)框架进行操作的。 一、安装Swagger包 在 NuGet程序包管理中安装下面的两个包&#xff1a; swagger包&#xff1a;Swashbuckle.AspNetCore swagger包过滤器&#xff1a;Swashbuckle.AspNetCore.Filters 二、swagger注册 在…