三、核心配置参数
FullCalendar 提供了丰富的配置选项，用于定制日历的外观和行为。以下是最常用的配置参数分类详解。
3.1 视图配置
3.2 事件配置
3.3 时间与本地化配置
3.4 交互配置
3.5 自定义视图
当需要创建具有特定时长的自定义视图时，可以通过 views 参数进行配置。
var calendar = new Calendar(calendarEl, {
defaultView: 'resourceTimelineCustom',
views: {
resourceTimelineCustom: {
type: 'resourceTimeline',
duration: { days: 4 } // 自定义视图时长为4天
}
}
});
3.6 按钮文本自定义与本地化
var calendar = new Calendar(calendarEl, {
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
list: '列表'
},
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
});
3.7 视图特定配置
agenda 视图特有配置：
allDaySlot：是否显示“全天”区域，默认 true
allDayText：自定义全天区域显示文本，默认 'all-day'
slotEventOverlap：事件是否允许重叠，默认 true
slotDuration：时间槽间隔（分钟）
minTime / maxTime：可视区域的时间范围
四、事件数据管理
4.1 事件对象（Event Object）
事件对象是 FullCalendar 中最核心的数据结构，用于存储每个日程事件的信息。
4.2 事件数据源（Event Sources）
FullCalendar 支持从多种数据源获取事件数据。
方式一：静态数组
events: [
{ title: '事件 1', start: '2024-01-01' },
{ title: '事件 2', start: '2024-01-05', end: '2024-01-07' }
]
方式二：JSON API
events: '/api/events'
方式三：回调函数
events: function(info, successCallback, failureCallback) {
$.ajax({
url: '/api/events',
data: {
start: info.start.valueOf(),
end: info.end.valueOf()
},
success: function(data) {
successCallback(data);
}
});
}
4.3 自定义事件属性
可以通过 extendedProps 为事件添加自定义属性。
var calendar = new Calendar(calendarEl, {
events: [
{
title: 'Meeting',
start: '2023-10-10T10:00:00',
extendedProps: {
description: 'Discuss project updates',
priority: 'high'
}
}
],
eventContent: function(arg) {
// 在渲染时访问自定义属性
let description = arg.event.extendedProps.description;
return { html: `<b>${arg.event.title}</b><br/><small>${description}</small>` };
}
});
4.4 动态添加/更新/删除事件
// 添加事件
calendar.addEvent({
title: '新事件',
start: '2024-01-15',
allDay: true
});
// 获取事件
var event = calendar.getEventById('event-id');
// 更新事件（方式一：使用 setProp 和 setDates）
event.setProp('title', '修改后的标题');
event.setDates('2024-01-20', '2024-01-22');
// 更新事件（方式二：使用 remove 后重新 add）
event.remove();
calendar.addEvent({ ...newEventData });
// 批量更新事件源
calendar.refetchEvents();
4.5 扩展事件属性与显示
如果需要在事件对象中添加额外的字段并在日历中显示，可以在渲染回调中处理。例如，向事件添加 description 字段并在日历中显示。
eventContent: function(arg) {
let description = arg.event.extendedProps.description;
let html = `<div class="fc-event-title">${arg.event.title}</div>`;
if (description) {
html += `<div class="fc-event-description">${description}</div>`;
}
return { html: html };
}
4.6 动态刷新事件数据
当后端数据变化时，可以调用以下方法刷新日历：
// 重新获取所有事件源的数据
calendar.refetchEvents();
// 移除特定事件
var event = calendar.getEventById('event-id');
event.remove();
// 添加新事件
calendar.addEvent({
title: '新日程',
start: '2024-01-20'
});
