vuefullcalendar 知识总结

最新推荐文章于 2024-07-23 13:00:00 发布

请叫我百度一下

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量8k

点赞数 1

文章标签：前端 javascript 开发语言 vue

本文链接：https://blog.csdn.net/m0_66571906/article/details/131531496

版权

FullCalendar是一个功能丰富的日历插件，适用于Vue等框架，支持日、周、月视图及任务展示。文章介绍了如何引入和配置插件，包括基础参数设置、日程创建、外部拖拽事件处理、定位显示日期以及日历事件监听等。此外，还强调了官方文档和社区资源在解决特定问题时的重要性。

摘要由CSDN通过智能技术生成

fullcalendar是一款灵活的功能全面的插件，可以将事件与任务以日立的形式展现，满足日常的日历开发。

此文章只总结大概的基础内容和本此用到内容的详讲！

官方文档(英文模式)：文档 |完整日历 (fullcalendar.io)

中文文档(非官方)：(63条消息) FullCalendar中文文档：API_Hesper_Pan的博客-CSDN博客

基础用法：

1、引入日历库

在项目中引入

npm install @fullcalendar/core

npm install @fullcalendar/vue

npm install @fullcalendar/daygrid

npm install @fullcalendar/interaction

npm install @fullcalendar/timegrid

npm install @fullcalendar/list

在页面中引入

import '@fullcalendar/core'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import moment from "moment";

在组件调用方法中

2、页面调用

html：

script：（日历中的基础参数）

calendarOptions: {
// 日历插件配置
plugins: [rrulePlugin, dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
// 日历模式
initialView: 'dayGridMonth(月)'/dayGridWeek(周)/timeGridDay(时)/listWeek(周列表),
// 配置中文
locale: 'zh-cn',

//包含资源列表的区域的宽度
resourceAreaWidth: 200,

//日历视图区域的高度
contentHeight: 200, // 自定义设置背景颜色时一定要初始化日期时间
initialDate: new Date(),
// 日历头部
headerToolbar: {
left: '',
center: '',
right: ''
},
// 日历触发拖拽的钩子
drop: this.newEventDrop,
// 日期是否可以编辑
selectable: true,
// 日历上是否可拖拽
editable: false,
// 拖拽位置
droppable: true,
// 拖拽元素
dropAccept: ['.drop-item', '.type-item'],
// 点击日期文字连接
navLinks: true,

//日历事件设置
events: [

// 周期性事件
{

rrule: {

freq: 'weekly', // 周周期
byweekday: [], // 周期性星期，星期简称
dtstart:‘2023-01-01’ //周期开始时间
},
exdate: [] // 排除掉周期内日期数组
}，

{

//日程开始时间

start: ’2023-01-01‘,
//日程颜色
color: #999,
// 日程id
id: ’1‘,
// 日程标题
title: ’日程标题‘,
// 日程持续时长
antualTime: 'All'

}
],
// 点击日程触发钩子
eventClick: this.handleEventClick,
// 日期选择触发钩子
select: this.handleDateClick,
// 日历取消选择触发
unselect: this.unselect,
// 日程鼠标离开
eventMouseout: this.handleMouseLeave,
// 不显示具体时间
displayEventTime: false
}