在 Web 开发中，日程管理和日历功能是许多应用的核心需求。无论是个人日程管理、团队协作工具、会议室预订系统，还是医疗预约平台，一个灵活、美观、交互流畅的日历组件都是不可或缺的。然而，构建这样一个日历组件并非易事——你需要处理复杂的日期计算、视图切换、事件拖拽、资源管理等一系列问题。
FullCalendar 正是为解决这一痛点而生的。它是一个功能强大、高度可定制的 JavaScript 日历库，支持拖拽、缩放、资源视图等功能。FullCalendar 几乎可以覆盖你所能想到的所有日程管理场景，被广泛应用于各类企业级项目中。本文将系统全面地介绍 FullCalendar 的核心知识点，从设计理念到安装配置，从核心 API 到高级定制，帮助读者全面掌握这一强大的日历工具。
一、FullCalendar 概述
1.1 什么是 FullCalendar
FullCalendar 是一个功能强大的 JavaScript 日历库，用于创建可交互的日历日程应用。它提供了多种视图（月、周、日、时间轴等），支持事件的拖拽、缩放、添加、编辑等操作，并且高度可定制。
FullCalendar 的核心特性可以概括为以下几点：
1.2 FullCalendar 与其他日历库的对比
选择 FullCalendar 的场景：
需要复杂的事件管理和交互
需要资源调度功能（会议室预订、人员排班）
需要时间轴视图（timeline view）
对文档和社区支持有较高要求
二、安装与快速入门
2.1 安装 FullCalendar
方式一：npm 安装（推荐工程化项目）
# 安装核心包
npm install @fullcalendar/core
# 按需安装视图插件
npm install @fullcalendar/daygrid # 月视图
npm install @fullcalendar/timegrid # 周/日视图
npm install @fullcalendar/list # 列表视图
npm install @fullcalendar/interaction # 拖拽、缩放交互
# 资源视图（需要 Scheduler 许可证）
npm install @fullcalendar/resource
npm install @fullcalendar/resource-timeline
方式二：CDN 引入
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/timegrid/main.css' rel='stylesheet' />
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script src='fullcalendar/timegrid/main.js'></script>
2.2 第一个 FullCalendar 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FullCalendar 快速入门</title>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth', // 初始视图为月视图
headerToolbar: { // 头部工具栏配置
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [ // 事件数据
{
title: '会议',
start: '2024-01-15T10:00:00',
end: '2024-01-15T12:00:00'
},
{
title: '生日派对',
start: '2024-01-20'
}
]
});
calendar.render();
});
</script>
</body>
</html>
2.3 在 Vue 3 中使用 FullCalendar
<template>
<FullCalendar ref="fullCalendarRef" :options="calendarOptions" />
</template>
<script setup>
import { ref } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
const calendarRef = ref(null)
const calendarOptions = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{ title: '会议', start: '2024-01-15T10:00:00', end: '2024-01-15T12:00:00' },
{ title: '生日派对', start: '2024-01-20' }
],
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
locale: 'zh-cn',
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
dateClick: (info) => {
console.log('日期点击:', info.dateStr)
},
eventClick: (info) => {
console.log('事件点击:', info.event.title)
}
}
</script>
