求Fullcalendar导入iCal(ics)的可运行示例及问题解决

先解决「dayGridPlugin not found」错误 #

Fullcalendar v6+版本对插件结构做了调整，旧版本的插件引入方式已失效，需按以下方式处理：

1. CDN引入方式（无需npm安装，快速测试） #

直接在HTML中引入Fullcalendar主库及所需插件的CDN资源，插件名称简化为dayGrid、timeGrid等，无需加Plugin后缀：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css' rel='stylesheet' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@6.1.10/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.10/main.min.js'></script>
</head>
<body>
    <div id='calendar'></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                plugins: ['dayGrid', 'timeGrid', 'icalendar'],
                events: {
                    url: '你的iCal资源URL',
                    format: 'ics'
                }
            });
            calendar.render();
        });
    </script>
</body>
</html>

2. npm本地安装方式 #

先安装完整依赖包：

npm install fullcalendar @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/icalendar

然后在JS文件中正确导入插件：

import { Calendar } from 'fullcalendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import icalendarPlugin from '@fullcalendar/icalendar';

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new Calendar(calendarEl, {
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        plugins: [dayGridPlugin, timeGridPlugin, icalendarPlugin],
        events: {
            url: '你的iCal资源URL',
            format: 'ics'
        }
    });
    calendar.render();
});

解决CORS错误 #

浏览器同源策略禁止直接跨域请求第三方iCal资源，可通过以下两种方案解决：

1. 后端代理（通用方案） #

搭建简单的Node.js代理服务器，转发iCal请求：

// 依赖：先安装 express 和 axios
// npm install express axios

const express = require('express');
const axios = require('axios');
const app = express();

// 允许前端跨域访问
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET');
    next();
});

// 代理iCal请求
app.get('/proxy-ical', async (req, res) => {
    try {
        const icalUrl = req.query.url;
        const response = await axios.get(icalUrl, { responseType: 'text' });
        res.set('Content-Type', 'text/calendar');
        res.send(response.data);
    } catch (err) {
        res.status(500).send('获取iCal数据失败');
    }
});

app.listen(3000, () => {
    console.log('代理服务器运行在 http://localhost:3000');
});

之后修改Fullcalendar的events.url为代理接口：

events: {
    url: 'http://localhost:3000/proxy-ical?url=目标iCal资源URL',
    format: 'ics'
}

2. 服务端CORS配置（若iCal资源由你控制） #

如果是自己的服务器托管iCal文件，可在服务器端添加CORS响应头。以Nginx为例：

location /path/to/your.ics {
    add_header Access-Control-Allow-Origin "你的前端域名";
    add_header Access-Control-Allow-Methods "GET";
}

关键注意事项 #

• 必须使用Fullcalendar v6.x版本，旧版本API和插件结构已废弃，旧示例无法兼容。
• 插件需按需引入，CDN方式要确保加载对应插件的JS文件，npm方式要安装对应插件包。
• CORS问题无法仅通过前端代码绕过，必须依赖代理或服务端配置。

内容的提问来源于stack exchange，提问作者Haegar