Vue日历组件FullCalendar使用方法
FullCalendar (全日历)Vue组件的使用
FullCalendar官方文档地址
FullCalendar日历组件支持Vue React Angular Javascript
Vue2的框架示例:
npm install --save @fullcalendar/core @fullcalendar/vue
<template><div class="calendar-container"><FullCalendar :options="calendarOptions" :header="{ left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }" /></div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { getWeekNum, FormateDate,getWeek } from '../utils/dayformat'
export default {props: ['selectedDatesChange', 'selectedDates', 'DeleteTeacherLeisureDTOS'],components: {FullCalendar, // make the <FullCalendar> tag available},data() {return {// Integer, default: 1 (Monday),isHighlighted: false,// FullCalendar 组件配置项calendarOptions: {plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],initialView: "timeGridWeek",locale: "zh-cn", // 设置语言// initialView: 'dayGridMonth'nowIndicator: true,//根据当前事件显示刻度线headerToolbar: {left: "prev,next today",center: "title",right: "dayGridMonth,dayGridWeek,dayGrid",},firstDay:1 ,//设置一周中显示的第一天是哪天,周日是0,周一是1,类推height:1000,//设置日历高度events: [], dayHeaderFormat:(info)=>{// 格式化列头日期// console.log(info,'xxxxxxxx')console.log(info.date.marker,'xxxxxxxx')return getWeek(info.date.marker)},//试图显示的数据eventDragStart: (info) => {console.log(info);console.log("拖拽开始");},eventDragStop: (info) => {console.log(info, '拖拽结束');},eventDrop: (info) => {// TODO 拖动结束修改原有的都开始时间和结束时间console.log('当拖动停止且事件已移至其他日期/时间时触发', info)},eventMouseEnter: (mouseEnterInfo) => {let Index = this.selectedDates.findIndex(item => {return item.id == mouseEnterInfo.event.id})console.log(Index);let doms = document.querySelectorAll('.fc-event')let parentEl = doms[Index].parentNodeconsole.log(mouseEnterInfo,doms,parentEl,'鼠标移入' );let div = document.querySelector('.delete-div')// div.innerText = '删除元素'// div.className='delete-div'// div.onclick = (e) => {// console.log(e,'eee');// e.stopPropagation()// e.preventDefault()// console.log('点击删除');// this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)// }if(parentEl.contains(div)){console.log('父元素包含子元素');}else{let div = document.createElement('div')div.innerText = '删除元素'div.className='delete-div'// div.onclick = (e) => {// console.log(e,'eee');// e.stopPropagation()// e.preventDefault()// console.log('点击删除');// // mouseEnterInfo.jsEvent.stopPropagation()// this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)// }// div.addEventListener('click', (e) => {// console.log('点击删除');// })// div.onclick = (e) => {// console.log(e,'eee');// e.stopPropagation()// e.preventDefault()// console.log('点击删除');// // mouseEnterInfo.jsEvent.stopPropagation()// // this.$emit('DeleteTeacherLeisureDTOS', mouseEnterInfo.event.id)// }parentEl.append(div)}// this.$alert('是否删除', '', {// confirmButtonText: '删除',// type:'warning',// showCancelButton:true,// cancelButtonText:'取消',// callback: action => {// console.log(action);// // this.$message({// // type: 'info',// // message: `action: ${action}`// // });// }// });},eventMouseLeave: (eventMouseLeave) => {console.log(eventMouseLeave, '鼠标移出事件');let doms = document.querySelectorAll('.fc-event')let Index = this.selectedDates.findIndex(item => {return item.id == eventMouseLeave.event.id})let parentEl = doms[Index].parentNodelet div = document.querySelector('.delete-div')parentEl.removeChild(div)},nowIndicatorDidMount: (info) => {},eventClick: (eventClickInfo) => {console.log(eventClickInfo, '鼠标点击事件');console.log(eventClickInfo.event.id)this.$emit('DeleteTeacherLeisureDTOS', eventClickInfo.event.id)// let INdex = this.calendarOptions.events.findIndex((item) => {// return item.id == eventClickInfo.event.id// })// if(INdex != -1){// this.calendarOptions.events.splice(INdex,1)// }},// 字体颜色 eventTextColor: "#000000",eventBackgroundColor: "#F3E86A",//选中时间背景颜色eventBorderColor: "#F3E86A", //选中的时间边框颜色selectable: true,// selectMirror: true, //显示镜像editable: true, //是否允许修改日历// droppable: true, // 在日历之间拖拽// unselectAuto:false,//取消用户自动选择dragScroll: true, // 拖拽滚动// unselectCancel:'', //取消选择取消selectOverlap: function (event) {console.log(event);//选择重叠return event.display === "background";},dateClick: function (info) {/*日期选择*/console.log(info);},select: (selectionInfo) => {let object = {start: FormateDate(selectionInfo.start, 'YYYY-MM-DD HH:mm:ss'),end: FormateDate(selectionInfo.end, 'YYYY-MM-DD HH:mm:ss'),dayOfWeek: getWeekNum(selectionInfo.start),title: "可约"}//选中事件// console.log(selectionInfo);// this.calendarOptions.events.push(object);this.$emit('selectedDatesChange', object)},unselect: (jsEvent, view) => {console.log(jsEvent, view);},// buttonText: {// // 设置按钮// today: "今天",// month: "月",// week: "周",// dayGrid: "天",// },},};},相关文章:
Vue日历组件FullCalendar使用方法
FullCalendar (全日历)Vue组件的使用 FullCalendar官方文档地址 FullCalendar日历组件支持Vue React Angular Javascript Vue2的框架示例: npm install --save fullcalendar/core fullcalendar/vue<template><div class"cal…...
TinyML在OBD-II边缘设备上燃油类型分类的实现与优化
论文标题:TinyML Implementation and Optimization for Fuel Type Classification on OBD-II Edge Device(TinyML在OBD-II边缘设备上燃油类型分类的实现与优化) 作者信息:Miguel Amaral, Morsinaldo Medeiros, Matheus Andrade, …...
vue3 中 defineProps 声明示例
1、直接声明 // 1、直接使用 defineProps(["tableData", "acceptType"]); 2、运行时声明方式不使用TypeScript类型注解,而是使用JavaScript对象,使用 type 来定义props // 2、运行时声明方式不使用TypeScript类型注解,…...
SpringBoot整合MybatisPlus报错Bean不存在:NoSuchBeanDefinitionException
报错信息: Exception in thread “main” org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type ‘com.feng.mybatisplusdemo.dao.UserMapper’ available 解决办法: 将原来引入的MybatisPlus依赖:…...
异步电机的控制是否还有研究的必要,是不是已经非常成熟了?
随着工业现代化和自动化进程的加快,异步电机作为最为常见的电动机之一,广泛应用于各类机械设备和工业自动化系统中。异步电机因其结构简单、成本低廉、维护方便等优点而备受青睐。 异步电机的基本原理与应用 异步电机,又称感应电机…...
【Android】解决 ADB 中 SELinux 设置与 `Failed transaction (2147483646)` 错误
解决 ADB 中 SELinux 设置与 Failed transaction (2147483646) 错误 在使用 ADB 进行开发和调试时,经常会遇到由于 Android 系统安全策略(SELinux)引起的权限问题,尤其是在执行某些操作时,可能会遇到类似 cmd: Failur…...
企业车辆管理系统(源码+数据库+报告)
一、项目介绍 352.基于SpringBoot的企业车辆管理系统,系统包含两种角色:管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言:Java 数据库:MySQL 项目管理工具:Maven 前端技术:Vue 后端技术&a…...
SAP RESTful架构和OData协议
一、RESTful架构 RESTful 架构(Representational State Transfer)是一种软件架构风格,专门用于构建基于网络的分布式系统,尤其是在 Web 服务中。它通过利用 HTTP 协议和一组简单的操作(如 GET、POST、PUT、DELETE&…...
centOS定时任务-cron服务
最近在训练模型的过程中,经常会因为内存爆炸而停止模型训练过程,而且因为内存占满停止的训练进程甚至都没有任何的报错提示。 1、需要减少num_worker的数量,降低需要占用内存的数据数量 2、可以通过free -h监控内存的占用情况 3、可以通过lin…...
Python毕业设计选题:基于django+vue的宠物服务管理系统
开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 宠物商品管理 医疗服务管理 美容服务管理 系统…...
css常用属性有哪些
在上篇文章我们知道了利用css选择器来对HTML进行简单装饰,就像做word文档一样,需要对哪一段落修改格式,就需要先选中,css选择器就是这意思。这格式如何修改,怎么放大字体,怎么加粗,怎么修改背景…...
八大设计模式
设计模式在日常软件开发中的重要性 目录 单例模式工厂模式策略模式代理模式观察者模式装饰器模式模板方法模式建造者模式总结 单例模式 单例模式确保一个类只有一个实例,通常用于管理共享资源,如配置、缓存、线程池等。 代码实现:双重检查…...
神经网络基础-初识神经网络
人工神经网络( Artificial Neural Network, 简写为ANN)也简称为神经网络(NN),是一种模仿生物神经网络结构和功能的计算模型。人脑可以看做是一个生物神经网络,由众多的神经元连接而成。各个神经…...
《计算机视觉:瓶颈之辩与未来之路》
一、计算机视觉的崛起 计算机视觉是使用计算机模仿人类视觉系统的科学,让计算机拥有类似人类提取、处理、理解和分析图像以及图像序列的能力。它是一个多学科交叉的领域,与机器视觉、图像处理、人工智能、机器学习等领域密切相关。 计算机视觉行业可分为…...
Centos gcc 12.3 安装
参考博文1:Centos系统升级gcc_centos6升级gcc-CSDN博客 参考博文2:centos7升级gcc9之代码笔记_centos7 gcc9-CSDN博客 CentOS系统通常自带的软件包管理器(如YUM)不会包含最新版本的GCC,要安装GCC 12.3,你需要使用CentOS的第三方仓库,或者从源代码编译。 如果选择从源…...
B站bilibili视频转文字字幕下载方法
本文将讲述介绍一种使用本地工具如何快速的下载B站的字幕为本地文本文件的方法。 通常获取B站字幕需要在浏览器中安装第三方插件,通过插件获取字幕。随着大模型,生成式AI,ChatGPT的应用,B站也提供了AI小助手对视频的内容进行总结…...
vue CSS 自定义宽高 翻页 剥离 效果
新增需求,客户需要类似PPT的剥离效果用于WEB页面翻页,查找资料后,参考下方的掘金博主的文章,并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量,样式style中的属性与宽高的关系整理成了公式进行动态计算。 …...
uniapp使用百度地图配置了key,但是显示Map key not configured
搞了我两天的一个问题。 hbuilderx版本:4.36 问题介绍: 我的项目是公司的项目,需要在H5端使用百度地图,使用vue-cli创建的uniapp,就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因…...
Leetcode42-环形链表
题目 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使…...
C语言进阶(2) ---- 指针的进阶
前言:指针的主题,我们在初阶的《指针》章节已经接触过了,我们知道了指针的概念: 1.指针就是个变量,用来存放地址,地址唯一标识一块内存空间。 2.指针的大小是固定的4/8个字节(32位平台/64位平台)。 3.指针是…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
