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

FullCalendar：现代Web应用中的专业日历解决方案

news 2025/10/19 13:05:05

FullCalendar：现代Web应用中的专业日历解决方案

FullCalendar是一款功能强大的JavaScript日历库，旨在简化网页应用中复杂日程和事件管理的实现过程。它采用微内核架构设计，通过插件系统提供高度可定制的功能，能够满足从简单日程展示到复杂资源调度系统等各类应用场景的需求。作为开源项目，FullCalendar的核心功能完全免费且遵循MIT协议，开发者可以根据项目需求灵活选择功能模块 ，避免不必要的代码臃肿。本文将详细介绍FullCalendar的基本概念、安装配置、事件管理、用户交互以及在主流框架中的集成使用方法。

一、FullCalendar核心概念与架构特点

FullCalendar最初基于jQuery开发，经历了多个版本迭代，现已全面支持React、Vue和Angular等现代前端框架。其架构采用"微内核+插件"模式，使开发者能够按需引入功能，有效控制项目体积。核心引擎负责处理日期计算、视图切换和API调用等底层逻辑，而各种视图和功能则通过插件形式扩展 ，这种设计既保证了灵活性，又避免了功能冗余。

FullCalendar的主要功能模块包括：

多种视图模式：支持月视图、周视图、日视图和列表视图等多种展示方式，满足不同场景下的日程管理需求。
事件管理：提供添加、编辑、删除日历事件的功能，支持通过拖拽调整事件时间。
交互功能：包括点击事件、选择日期、拖拽事件等丰富的用户交互体验。
国际化支持：内置多语言包，支持包括中文在内的多种语言，可轻松切换显示语言。
动态数据源：能够与后端API集成，实时加载和更新日历事件数据。
响应式设计：自动适应不同屏幕尺寸，提供良好的移动端用户体验。

FullCalendar的插件系统是其最大亮点之一。开发者只需安装所需功能的插件，就能获得相应的功能支持 ，例如安装@fullcalendar/daygrid插件即可使用月视图功能，而无需引入其他不必要的代码。这种模块化设计使项目体积可控，同时保持功能的丰富性。

二、安装与配置方法

1. 基础安装

FullCalendar支持多种安装方式，包括通过npm包管理器安装和通过CDN引入。根据项目需求，可以选择适合的方式。

npm安装方法：

# 安装核心库
npm install @fullcalendar/core# 安装框架绑定层（以React为例）
npm install @fullcalendar/react# 安装所需视图插件
npm install @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list

CDN引入方法：

<!-- 引入CSS样式 -->
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6/main.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6/main.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6/main.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6/main.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/list@6/main.min.css' rel='stylesheet' /><!-- 引入JavaScript文件 -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/list@6/main.min.js'></script>

2. 基础配置项详解

FullCalendar提供了丰富的配置选项，以下是核心配置项的详细说明：

配置项	类型	默认值	说明
`plugins`	Array	[]	必须配置项，指定使用的插件
`initialView`	String	‘dayGridMonth’	设置日历初始显示的视图
`locale`	String	‘en’	设置日历语言，需配合语言包使用
`headerToolbar`	Object	{ left: ‘prev today next’, center: ‘title’, right: ‘’ }	配置日历顶部工具栏的布局和按钮
`selectable`	Boolean	false	是否允许用户选择日历上的时间段
`events`	Array	Function	URL
`height`	Number	String	‘auto’
`weekends`	Boolean	true	是否显示周末（周六和周日）
`firstDay`	Number	0	设置一周的第一天，0表示周日，1表示周一
`selectMirror`	Boolean	false	是否显示"镜像"效果，表示用户正在拖拽选择时间段
`eventColor`	String	‘#4285f4’	事件的默认背景颜色
`eventTimeFormat`	Object	{ hour: ‘2-digit’, minute: ‘2-digit’, meridiem: false }	事件时间的格式设置

3. 初始化配置示例

以下是一个基本的FullCalendar配置示例：

import { createRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';const calendarRef = createRef();const calendarOptions = {plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],initialView: 'dayGridMonth',height: '80vh',weekends: true,firstDay: 1, // 设置周一为一周的开始locale: 'zh-cn', // 设置中文headerToolbar: {left: 'prev今天的',center: 'title',right: 'dayGridMonth D周视图, D日视图'},buttonText: {today: '今天',dayGridMonth: '月视图',timeGridWeek: '周视图',timeGridDay: '日视图',listMonth: '列表视图'},dayHeaderContent: (arg) => {// 自定义星期显示const days = ['日', '一', '二', '三', '四', '五', '六'];return { html: `<span class="fc-daygrid-day-number">${arg.text}</span>` };},events: [{title: '团队会议',start: '2025-10-20T10:00:00',end: '2025-10-20T12:00:00'},{title: '项目评审',start: '2025-10-22',allDay: true}],eventClick: (info) => {// 事件点击处理alert(`你点击了事件：${info.event.title}`);},dateClick: (info) => {// 日期点击处理alert(`你点击了日期：${info.dateStr}`);},eventDrop: (info) => {// 事件拖拽后处理alert(`事件已拖拽到：${info.event.startStr}`);},eventResize: (info) => {// 事件调整大小后处理alert(`事件已调整到：${info.event.startStr} 至 ${info.event.endStr}`);}
};function CalendarComponent() {return (<FullCalendarref={calendarRef}options={calendarOptions}/>);
}

三、事件管理与数据源配置

1. 静态事件添加

最简单的事件添加方式是直接在配置项中指定events数组：

events: [{title: '项目评审',start: '2025-10-22',end: '2025-10-23'},{title: '团队会议',start: '2025-10-20T10:00:00',end: '2025-10-20T12:00:00'}
]

2. 动态事件加载

FullCalendar支持从远程API动态加载事件数据，可以通过函数形式实现：

events: (fetchInfo, successCallback, failureCallback) => {// 构造请求参数const params = {start: fetchInfo.start.valueOf() / 1000, // 转换为秒end: fetchInfo.end.valueOf() / 1000,lang: 'zh-cn'};// 发送异步请求axios.get('/api/events', { params }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});
}

3. 事件操作API

FullCalendar提供了丰富的事件操作API，可以通过以下方法管理事件：

// 添加新事件
const calendarApi = calendarRef.current.getApi();
const newEvent = calendarApi.addEvent({title: '新事件',start: '2025-10-25T09:00:00',end: '2025-10-25T11:00:00'
});// 更新事件
newEvent.setProp('title', '更新后的事件');
newEvent.setProp('start', '2025-10-26T09:00:00');// 删除事件
newEvent.remove();// 刷新事件数据
calendarApi refetchEvents();

四、用户交互与回调函数

FullCalendar提供了多种用户交互回调函数，开发者可以根据需要实现相应的业务逻辑：

1. 日期选择

当用户点击或拖拽选择日历上的时间段时，select回调函数会被触发：

select: (selectionInfo) => {// 创建新事件const title = prompt('请输入新事件标题：');if (title) {calendarApi.addEvent({title: title,start: selectionInfo.start,end: selectionInfo.end});// 取消选择状态calendarApi.unselect();}
},
unselect: () => {// 当用户取消选择时触发console.log('选择已取消');
}

2. 事件点击

当用户点击日历上的事件时，eventClick回调函数会被触发：

eventClick: (info) => {// 获取事件信息const event = info.event;// 显示事件详情alert(`事件标题：${event.title}\n开始时间：${event.startStr}\n结束时间：${event.endStr}`);// 阻止默认行为return true;
}

3. 事件拖拽与调整

当用户拖拽调整事件时间时，eventDrop和eventResize回调函数会被触发：

eventDrop: (info) => {// 获取更新后的事件信息const event = info.event;const delta = info.eventdelta;// 发送更新请求到后端axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功，不做额外操作} else {// 更新失败，恢复事件位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复事件位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('网络错误，请稍后重试');});
},eventResize: (info) => {// 获取更新后的事件信息const event = info.event;const delta = info eventdelta;// 发送更新请求到后端axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功，不做额外操作} else {// 更新失败，恢复事件大小event.setStart(event.start);event.setEnd(event.end);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复事件大小event.setStart(event.start);event.setEnd(event.end);alert('网络错误，请稍后重试');});
}

五、高级功能实现

1. 动态数据源与分页加载

FullCalendar支持分页加载大量事件数据，可以通过设置loading回调函数实现：

loading: ( bool ) => {if (bool) {// 显示加载指示器document.getElementById('loading-indicator').style.display = 'block';} else {// 隐藏加载指示器document.getElementById('loading-indicator').style.display = 'none';}
},// 分页加载事件
events: (fetchInfo, successCallback, failureCallback) => {// 构造分页参数const params = {start: fetchInfo.start.valueOf() / 1000,end: fetchInfo.end.valueOf() / 1000,lang: 'zh-cn',page: 1,size: 100};// 发送分页请求axios.get('/api/events', { params }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});
}

2. 主题定制与样式覆盖

FullCalendar支持多种主题系统，可以通过CSS变量或自定义类名实现主题定制：

/* 覆盖默认主题 */
.fc {--fc-border-color: #e8e8e8; /* 边框颜色 */--fc-bg-color: #ffffff; /* 背景色 */--fc primary-color: #2d8cf0; /* 主要颜色 */--fc-today-bg-color: #f0f8ff; /* 今天背景色 */
}/* 自定义事件样式 */
.fc-daygrid-event {background-color: #4CAF50;border-radius: 4px;color: white;padding: 5px;
}.fc-timegrid-event {background-color: #4CAF50;border-radius: 4px;color: white;padding: 5px;
}.fc-list-item {background-color: #4CAF50;color: white;padding: 5px;
}

3. 国际化配置

FullCalendar支持多种语言，可以通过locale配置项和语言包实现国际化：

import { zhCN } from '@fullcalendar/core/locales';const calendarOptions = {plugins: [dayGridPlugin, interactionPlugin, listPlugin],initialView: 'dayGridMonth',locale: 'zh-cn',locales: [zhCN],headerToolbar: {left: 'prev今天的',center: 'title',right: 'dayGridMonth D周视图, D日视图'},ButtonText: {today: '今天',dayGridMonth: '月视图',timeGridWeek: '周视图',timeGridDay: '日视图',listMonth: '列表视图'},dayHeaderContent: (arg) => {// 自定义星期显示const days = ['日', '一', '二', '三', '四', '五', '六'];return { html: `<span class="fc-daygrid-day-number">${days[arg日期 day]} ${arg.text}</span>` };},slotLabelFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false // 设置为24小时制},eventTimeFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false // 设置为24小时制},allDayText: '全天' // 设置全天文本
};

六、在React框架中的集成使用

1. React基础配置

import React, { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';function ReactCalendar() {const [events, setEvents] = useState([]);const calendarRef = React.createRef();// 初始化日历useEffect(() => {// 获取初始事件数据fetchData();}, []);// 获取事件数据const fetchData = () => {axios.get('/api/events', {params: {start: new Date().valueOf() / 1000,end: new Date().valueOf() / 1000 + 86400 * 30,lang: 'zh-cn'}}).then(response => {if (response.status === 'success') {setEvents(response.data);}}).catch(error => {console.error('获取事件数据失败:', error);});};// 事件点击处理const handleEventClick = (info) => {// 显示事件详情alert(`事件标题：${info.event.title}\n开始时间：${info.event.startStr}\n结束时间：${info.event.endStr}`);};// 日期选择处理const handleDateSelect = (selectionInfo) => {// 创建新事件const title = prompt('请输入新事件标题：');if (title) {calendarRef.current.getApi().addEvent({title: title,start: selectionInfo.start,end: selectionInfo.end});// 取消选择状态calendarRef.current.getApi().unselect();}};// 事件拖拽处理const handleEventDrop = (info) => {// 获取更新后的事件信息const event = info.event;const delta = info.eventdelta;// 发送更新请求axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功} else {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('网络错误，请稍后重试');});};// 配置项const calendarOptions = {plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],initialView: 'dayGridMonth',height: '80vh',weekends: true,firstDay: 1,locale: 'zh-cn',headerToolbar: {left: 'prev今天的',center: 'title',right: 'dayGridMonth D周视图, D日视图'},ButtonText: {today: '今天',dayGridMonth: '月视图',timeGridWeek: '周视图',timeGridDay: '日视图',listMonth: '列表视图'},dayHeaderContent: (arg) => {// 自定义星期显示const days = ['日', '一', '二', '三', '四', '五', '六'];return { html: `<span class="fc-daygrid-day-number">${days[arg日期 day]} ${arg.text}</span>` };},slotLabelFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},eventTimeFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},allDayText: '全天',events: events,eventClick: handleEventClick,dateClick: handleDateSelect,eventDrop: handleEventDrop};return (<div><FullCalendarref={calendarRef}options={calendarOptions}/></div>);
}

2. React高级配置

// 动态加载事件
const calendarOptions = {events: (fetchInfo, successCallback, failureCallback) => {// 构造请求参数const params = {start: fetchInfo.start.valueOf() / 1000,end: fetchInfo.end.valueOf() / 1000,lang: 'zh-cn'};// 发送请求axios.get('/api/events', { params }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});},loading: (bool) => {// 控制加载状态setisLoading(bool);},eventSources: [{events: (fetchInfo, successCallback, failureCallback) => {// 加载其他来源的事件axios.get('/api/other-events', { params: { ...fetchInfo } }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});},className: 'other-event', // 追加自定义classcolor: '#234299', // 设置颜色backgroundColor: '#ecf4ff', // 设置背景色textColor: '#2d8cf0' // 设置文字颜色}]
};

七、在Vue3框架中的集成使用

1. Vue3基础配置

<template><div class="app-container"><FullCalendar :options="calendarOptions" ref="fullCalendar" /></div>
</template><script setup>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import { reactive, ref, onMounted } from 'vue'
import { zhCN } from '@fullcalendar/core/locales'
import axios from 'axios'const fullCalendar = ref(null)// 配置项
const calendarOptions = reactive({plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],initialView: 'dayGridMonth',height: '80vh',weekends: true,firstDay: 1,locale: 'zh-cn',locales: [zhCN],headerToolbar: {left: 'prev今天的',center: 'title',right: 'dayGridMonth D周视图, D日视图'},ButtonText: {today: '今天',dayGridMonth: '月视图',timeGridWeek: '周视图',timeGridDay: '日视图',listMonth: '列表视图'},dayHeaderContent: (arg) => {// 自定义星期显示const days = ['日', '一', '二', '三', '四', '五', '六'];return { html: `<span class="fc-daygrid-day-number">${days[arg日期 day]} ${arg.text}</span>` };},slotLabelFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},eventTimeFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},allDayText: '全天',events: events,eventClick: (info) => {// 事件点击处理alert(`事件标题：${info.event.title}\n开始时间：${info.event.startStr}\n结束时间：${info.event.endStr}`);},dateClick: (info) => {// 日期点击处理const title = prompt('请输入新事件标题：');if (title) {const calendarApi = fullCalendar.value.getApi()calendarApi.addEvent({title: title,start: info.start,end: info.end});calendarApi.unselect();}},eventDrop: (info) => {// 事件拖拽处理const event = info.event;const delta = info.eventdelta;// 发送更新请求axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功} else {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('网络错误，请稍后重试');});},eventResize: (info) => {// 事件调整大小处理const event = info.event;const delta = info.eventdelta;// 发送更新请求axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功} else {// 更新失败，恢复大小event.setStart(event.start);event.setEnd(event.end);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复大小event.setStart(event.start);event.setEnd(event.end);alert('网络错误，请稍后重试');});},loading: (bool) => {// 控制加载状态isLoading.value = bool;}
})// 事件数据
const events = ref([{title: '团队会议',start: '2025-10-20T10:00:00',end: '2025-10-20T12:00:00'},{title: '项目评审',start: '2025-10-22',allDay: true}
])// 获取日历API实例
const calendarApi = ref(null)// 挂载后初始化API
onMounted(() => {calendarApi.value = fullCalendar.value.getApi()
})// 刷新事件数据
const refetchEvents = () => {calendarApi.value refetchEvents()
}// 切换视图
const changeView = (viewName) => {calendarApi.value changeView(viewName)
}// 切换语言
const changeLocale = (locale) => {calendarApi.value.setOption('locale', locale)// 可以同时更新其他语言相关配置
}
</script>

2. Vue3高级配置

<template><div class="app-container"><FullCalendar:options="calendarOptions"ref="fullCalendar"@eventClick="handleEventClick"@dateClick="handleDateClick"@eventDrop="handleEventDrop"@eventResize="handleEventResize"@loading="handleLoading"/><div v-if="isLoading" class="loading-indicator">加载中...</div></div>
</template><script setup>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import { reactive, ref, onMounted } from 'vue'
import { zhCN } from '@fullcalendar/core/locales'
import axios from 'axios'const fullCalendar = ref(null)
const calendarApi = ref(null)
const events = ref([])
constisLoading = ref(false)// 配置项
const calendarOptions = reactive({plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],initialView: 'dayGridMonth',height: '80vh',weekends: true,firstDay: 1,locale: 'zh-cn',locales: [zhCN],headerToolbar: {left: 'prev今天的',center: 'title',right: 'dayGridMonth D周视图, D日视图'},ButtonText: {today: '今天',dayGridMonth: '月视图',timeGridWeek: '周视图',timeGridDay: '日视图',listMonth: '列表视图'},dayHeaderContent: (arg) => {// 自定义星期显示const days = ['日', '一', '二', '三', '四', '五', '六'];return { html: `<span class="fc-daygrid-day-number">${days[arg日期 day]} ${arg.text}</span>` };},slotLabelFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},eventTimeFormat: {hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false},allDayText: '全天',eventSources: [{events: (fetchInfo, successCallback, failureCallback) => {// 构造请求参数const params = {start: fetchInfo.start.valueOf() / 1000,end: fetchInfo.end.valueOf() / 1000,lang: 'zh-cn'};// 发送请求axios.get('/api/events', { params }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});},className: 'event-source-1', // 追加自定义classcolor: '#234299', // 设置颜色backgroundColor: '#ecf4ff', // 设置背景色textColor: '#2d8cf0' // 设置文字颜色},{events: (fetchInfo, successCallback, failureCallback) => {// 加载其他来源的事件axios.get('/api/other-events', { params: { ...fetchInfo } }).then(response => {if (response.status === 'success') {successCallback(response.data);} else {failureCallback(response.message);}}).catch(error => {failureCallback('加载失败，请稍后重试');});},className: 'event-source-2', // 追加自定义classcolor: '#a05eb5', // 设置颜色backgroundColor: '#fceefe', // 设置背景色textColor: '#a05eb5' // 设置文字颜色}],eventOrder: (a, b) => {// 自定义事件排序规则return a.title.localeCompare(b.title);},dayMaxEvents: 3, // 设置每个单元格显示的最大事件数eventOverlap: false, // 设置事件是否允许重叠eventMinHeight: 25, // 设置事件的最小高度eventShortHeight: 20 // 设置短事件的高度
})// 获取事件数据
const fetchData = () => {axios.get('/api/events', {params: {start: new Date().valueOf() / 1000,end: new Date().valueOf() / 1000 + 86400 * 30,lang: 'zh-cn'}}).then(response => {if (response.status === 'success') {events.value = response.data;}}).catch(error => {console.error('获取事件数据失败:', error);});
};// 事件点击处理
const handleEventClick = (info) => {// 显示事件详情alert(`事件标题：${info.event.title}\n开始时间：${info.event.startStr}\n结束时间：${info.event.endStr}`);
};// 日期点击处理
const handleDateClick = (info) => {// 创建新事件const title = prompt('请输入新事件标题：');if (title) {calendarApi.value.addEvent({title: title,start: info.start,end: info.end});calendarApi.value.unselect();}
};// 事件拖拽处理
const handleEventDrop = (info) => {// 获取更新后的事件信息const event = info.event;const delta = info.eventdelta;// 发送更新请求axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功} else {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复位置event.setStart(event.start - delta);event.setEnd(event.end - delta);alert('网络错误，请稍后重试');});
};// 事件调整大小处理
const handleEventResize = (info) => {// 获取更新后的事件信息const event = info.event;const delta = info.eventdelta;// 发送更新请求axios.put(`/api/events/${event.id}`, {title: event.title,start: event.startStr,end: event.endStr}).then(response => {if (response.status === 'success') {// 更新成功} else {// 更新失败，恢复大小event.setStart(event.start);event.setEnd(event.end);alert('更新失败，请稍后重试');}}).catch(error => {// 更新失败，恢复大小event.setStart(event.start);event.setEnd(event.end);alert('网络错误，请稍后重试');});
};// 加载状态处理
const handleLoading = (bool) => {// 控制加载状态isLoading.value = bool;
};// 刷新事件数据
const refetchEvents = () => {calendarApi.value refetchEvents()
};// 切换视图
const changeView = (viewName) => {calendarApi.value changeView(viewName)
};// 切换语言
const changeLocale = (locale) => {calendarApi.value.setOption('locale', locale)// 可以同时更新其他语言相关配置
};// 挂载后初始化
onMounted(() => {calendarApi.value = fullCalendar.value.getApi();fetchData();
});
</script>

八、常见问题与解决方案

1. 事件数据不更新

问题：修改了事件数据，但日历视图未更新。

解决方案：

// React中
const calendarApi = calendarRef.current.getApi();
calendarApi refetchEvents();// Vue3中
const calendarApi = fullCalendar.value.getApi();
calendarApi refetchEvents();

2. 语言包未生效

问题：设置了locale: 'zh-cn'，但日历仍显示英文。

解决方案：确保已导入并传递语言包：

// React
import { zhCN } from '@fullcalendar/core/locales';const calendarOptions = {locale: 'zh-cn',locales: [zhCN],// 其他配置...
};// Vue3
import { zhCN } from '@fullcalendar/core/locales';const calendarOptions = reactive({locale: 'zh-cn',locales: [zhCN],// 其他配置...
});

3. 样式不生效

问题：自定义CSS样式未生效。

解决方案：

/* 使用深度选择器覆盖样式 */
::v-deep .fc-daygrid-event {background-color: #4CAF50;border-radius: 4px;color: white;padding: 5px;
}::v-deep .fc-timegrid-event {background-color: #4CAF50;border-radius: 4px;color: white;padding: 5px;
}::v-deep .fc-list-item {background-color: #4CAF50;color: white;padding: 5px;
}

4. 动态数据源加载失败

问题：动态数据源函数返回的数据未正确加载。

解决方案：确保返回的数据格式正确：

// 正确的事件数据格式
[{title: '事件标题',start: '2025-10-20T10:00:00',end: '2025-10-20T12:00:00',id: '123', // 可选，用于事件标识extendedProps: { // 可选，扩展属性description: '事件详细描述',category: '会议'}}
]

九、最佳实践与性能优化

1. 按需加载插件

最佳实践：仅加载项目所需的功能插件，避免引入不必要的代码。

// 仅加载月视图和基本交互功能
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';const calendarOptions = {plugins: [dayGridPlugin, interactionPlugin],// 其他配置...
};

2. 使用懒加载

最佳实践：对于大型应用，可以考虑使用懒加载技术按需加载插件：

// React懒加载示例
const dayGridPlugin = lazy(() => import('@fullcalendar/daygrid'));
const timeGridPlugin = lazy(() => import('@fullcalendar/timegrid'));// Vue3懒加载示例
const dayGridPlugin = defineAsyncComponent(() => import('@fullcalendar/daygrid'));
const timeGridPlugin = defineAsyncComponent(() => import('@fullcalendar/timegrid'));

3. 优化事件数据

最佳实践：对于大量事件数据，可以考虑以下优化措施：

分页加载：仅加载当前视图范围内的事件数据。
数据压缩：减少事件数据的传输量。
缓存机制：实现事件数据的缓存，减少重复请求。

4. 使用虚拟滚动

最佳实践：对于日视图和周视图，可以启用虚拟滚动优化性能：

const calendarOptions = {// 其他配置...dayMaxEvents: true, // 启用事件折叠progressiveEventRendering: true, // 启用渐进式渲染slotMinTime: '06:00:00', // 设置最小时间slotMaxTime: '22:00:00' // 设置最大时间
};

十、总结与未来展望

FullCalendar作为一款功能强大的日历库，通过微内核架构和插件系统，为开发者提供了高度灵活的日历解决方案 。其丰富的配置项和API使开发者能够轻松实现从简单日程展示到复杂资源调度系统的各种需求。在React和Vue等现代前端框架中，FullCalendar提供了官方绑定组件，使集成过程更加便捷。

随着Web技术的不断发展，FullCalendar也在持续更新和改进。未来版本可能会引入更多现代化功能，如更好的TypeScript支持、更丰富的主题系统和更完善的国际化功能 。同时，随着前端架构的演进，FullCalendar在框架集成方面的体验可能会进一步优化。

对于需要在Web应用中实现日历功能的开发者来说，FullCalendar是一个值得考虑的选择。它不仅提供了丰富的功能，还通过插件系统实现了按需加载，有效控制了项目体积。无论是简单的日程管理，还是复杂的资源调度系统，FullCalendar都能提供灵活且强大的解决方案。

通过本文的详细介绍，希望读者能够全面了解FullCalendar的功能特点和使用方法，并能够在实际项目中成功应用这一强大的日历库。

查看全文

http://www.dtcms.com/a/500486.html