当前位置: 首页 > news >正文

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: "天",// },},};},
http://www.lryc.cn/news/505435.html

相关文章:

  • TinyML在OBD-II边缘设备上燃油类型分类的实现与优化
  • vue3 中 defineProps 声明示例
  • SpringBoot整合MybatisPlus报错Bean不存在:NoSuchBeanDefinitionException
  • 异步电机的控制是否还有研究的必要,是不是已经非常成熟了?
  • 【Android】解决 ADB 中 SELinux 设置与 `Failed transaction (2147483646)` 错误
  • 企业车辆管理系统(源码+数据库+报告)
  • SAP RESTful架构和OData协议
  • centOS定时任务-cron服务
  • Python毕业设计选题:基于django+vue的宠物服务管理系统
  • css常用属性有哪些
  • 八大设计模式
  • 神经网络基础-初识神经网络
  • 《计算机视觉:瓶颈之辩与未来之路》
  • Centos gcc 12.3 安装
  • B站bilibili视频转文字字幕下载方法
  • vue CSS 自定义宽高 翻页 剥离 效果
  • uniapp使用百度地图配置了key,但是显示Map key not configured
  • Leetcode42-环形链表
  • C语言进阶(2) ---- 指针的进阶
  • 使用Python筛选图片
  • GESP CCF python五级编程等级考试认证真题 2024年12月
  • URL的概念与格式
  • 【Elasticsearch】高亮搜索:从原理到Web呈现
  • samout llm解码 幻觉更低更稳定
  • 单片机:实现多任务处理(附带源码)
  • 负载均衡oj项目:介绍
  • 剑指Offer 03比特位计数
  • 多音轨视频使用FFmpeg删除不要音轨方法
  • elasticsearch 使用enrich processor填充数据
  • VMProtect:软件保护与安全的全面解决方案