三、核心配置参数

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'
});

来源：
http://xcfsr.cn