在FullCalendar中向eventObject添加属性

FullCalendar 中向 eventObject 添加属性

基础概念

FullCalendar 是一个流行的 JavaScript 日历组件，eventObject 是 FullCalendar 中表示日历事件的核心对象。默认情况下，eventObject 包含一些标准属性如 id、title、start、end 等，但开发者经常需要添加自定义属性来满足特定业务需求。

添加自定义属性的方法

1. 在事件源数据中添加

const events = [
  {
    id: '1',
    title: '会议',
    start: '2023-10-10T10:00:00',
    end: '2023-10-10T12:00:00',
    customAttribute: '自定义值',  // 添加自定义属性
    extendedProps: {  // 推荐使用extendedProps存放自定义属性
      priority: 'high',
      location: '会议室A'
    }
  }
];

2. 在事件渲染时动态添加

eventRender: function(info) {
  info.event.setExtendedProp('lastModified', new Date());
  info.event.setProp('customColor', '#ff0000');
}

3. 通过事件回调添加

eventClick: function(info) {
  info.event.setExtendedProp('clickCount', 
    (info.event.extendedProps.clickCount || 0) + 1);
}

优势

灵活性：可以存储任何与事件相关的额外信息
兼容性：自定义属性不会影响FullCalendar的核心功能
组织性：使用extendedProps可以更好地组织自定义属性

访问自定义属性

eventClick: function(info) {
  // 访问直接添加的属性
  console.log(info.event.customAttribute);
  
  // 访问extendedProps中的属性
  console.log(info.event.extendedProps.priority);
  
  // 获取所有自定义属性
  console.log(info.event.extendedProps);
}

注意事项

推荐使用extendedProps来存储自定义属性，因为：
- 这是FullCalendar官方推荐的方式
- 可以避免与未来版本可能添加的标准属性冲突
- 便于属性管理和序列化

直接添加到eventObject根级别的自定义属性在事件序列化时可能不会被保留
修改事件属性后，可能需要调用info.event.setProp()或info.event.setExtendedProp()来确保更改生效

应用场景

存储业务相关数据（如会议类型、参与人员）
控制事件样式和行为（如优先级颜色）
记录事件状态（如完成百分比）
实现自定义交互逻辑（如点击次数统计）

示例代码

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        title: '项目评审',
        start: '2023-10-15',
        end: '2023-10-17',
        extendedProps: {
          department: '研发部',
          budget: 5000
        },
        color: '#ff9f89'
      }
    ],
    eventClick: function(info) {
      alert(
        '事件: ' + info.event.title + '\n' +
        '部门: ' + info.event.extendedProps.department + '\n' +
        '预算: $' + info.event.extendedProps.budget
      );
    }
  });
  
  calendar.render();
});