如何为FullCalendar中通过calendar.addEvent添加的事件启用ICS功能

不需要修改你现有的calendar.addEvent事件添加逻辑，直接通过ical.js库就能实现ICS导出，步骤如下：

1. 引入ical.js库 #

在HTML中添加CDN引用：

<script src="https://cdn.jsdelivr.net/npm/ical.js@1.5.0/build/ical.min.js"></script>

2. 添加导出按钮 #

在页面中加一个触发导出的按钮：

<button id="export-ics">导出ICS日历</button>

3. 编写导出逻辑 #

通过FullCalendar的getEvents()方法获取所有已添加的事件，再转换成ICS格式并生成下载文件：

document.getElementById('export-ics').addEventListener('click', function() {
  // 获取FullCalendar实例中的所有事件
  const events = calendar.getEvents();
  
  // 创建ICS日历对象
  const jCal = [
    'vcalendar',
    [
      ['version', {}, 'text', '2.0'],
      ['prodid', {}, 'text', '-//My Calendar//EN']
    ],
    []
  ];
  
  // 遍历每个事件，转换成ICS条目
  events.forEach(event => {
    const eventComponent = [
      'vevent',
      [
        ['uid', {}, 'text', event.id || `event-${Date.now()}-${Math.random()}`],
        ['dtstamp', {}, 'date-time', new Date().toISOString()],
        ['dtstart', {}, 'date-time', event.start.toISOString()],
        ['dtend', {}, 'date-time', event.end?.toISOString() || event.start.toISOString()],
        ['summary', {}, 'text', event.title],
        ['description', {}, 'text', event.extendedProps.description || ''],
        ['location', {}, 'text', event.extendedProps.location || '']
      ],
      []
    ];
    jCal[2].push(eventComponent);
  });
  
  // 生成ICS字符串
  const icsContent = ical.stringify(jCal);
  
  // 创建下载链接并触发下载
  const blob = new Blob([icsContent], { type: 'text/calendar' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'my-calendar.ics';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

关键说明 #

• 用calendar.getEvents()可以直接获取所有通过calendar.addEvent添加的事件，完全不需要修改原有事件添加逻辑
• ical.js会帮你处理ICS格式的规范，不需要手动拼接复杂的ICS语法
• 可以根据你的需求扩展事件属性（比如添加描述、地点，从event.extendedProps里取自定义字段）

内容的提问来源于stack exchange，提问作者Meet Kumar Jain