使用全日历导入 iCal (ics)？答案

【问题标题】：Import iCal (ics) with fullcalendar?使用全日历导入 iCal (ics)？
【发布时间】：2012-03-13 08:45:01
【问题描述】：

要使用全日历加载 .ics 文件需要做什么？不幸的是，我无法使用 php 或 .net。

【问题讨论】：

【解决方案1】：

我设法做到了。没有我想的那么难。我使用 ical.js 作为 ics 解析器。解析后，我得到一个 json 对象，其中包含 ics 中的所有信息。然后遍历它，根据the definition of FullCalendar Event object构造事件对象。

更新 FullCalendar v4 和重复事件

由于 v4 changed the initialization code 和下面的代码不计入重复事件，这里有一个适用于 v4 版本的代码：

$.get(calendarUrl).then(function (data) {
     // parse the ics data
     var jcalData = ICAL.parse(data.trim());
     var comp = new ICAL.Component(jcalData);
     var eventComps = comp.getAllSubcomponents("vevent");
     // map them to FullCalendar events
     var events = $.map(eventComps, function (item) {

        if (item.getFirstPropertyValue("class") == "PRIVATE") {
            return null;
        }
        else {
            var toreturn = {
                "title": item.getFirstPropertyValue("summary"),
                "location": item.getFirstPropertyValue("location"),
            };
            var rrule=item.getFirstPropertyValue("rrule");
            if(rrule!= null){ //event recurs
                toreturn.rrule={};
                if(rrule.freq) toreturn.rrule.freq=rrule.freq;
                if(rrule.parts.BYDAY) toreturn.rrule.byweekday=rrule.parts.BYDAY;
                if(rrule.until) toreturn.rrule.until=rrule.until.toString();
                if(rrule.until) toreturn.rrule.until=rrule.until.toString();
                if(rrule.interval) toreturn.rrule.interval=rrule.interval;
                var dtstart=item.getFirstPropertyValue("dtstart").toString();
                var dtend=item.getFirstPropertyValue("dtend").toString();
                toreturn.rrule.dtstart=dtstart;
                //count duration ms
                var startdate=new Date(dtstart);
                var enddate=new Date(dtend);
                toreturn.duration = enddate - startdate;
            }else{
                toreturn.start=item.getFirstPropertyValue("dtstart").toString();
                toreturn.end=item.getFirstPropertyValue("dtend").toString();
            }
            return toreturn;
        }
     });
     var calendarEl = document.getElementById('calendar');
     var calendar = new FullCalendar.Calendar(calendarEl, {

              plugins: [ 'interaction','dayGrid','rrule' ],
              defaultView: 'dayGridWeek',
              displayEventEnd: true,
              header: {
                  left: 'prev,next',
                  center: 'title',
                  right: 'dayGridDay,dayGridWeek,dayGridMonth'
              },
              events: events,
              eventRender: function (info) {
                // console.log(info.event);
                // append location
                if (info.event.extendedProps.location != null && info.event.extendedProps.location != "") {
                    info.el.append(info.event.extendedProps.location );
                }
              }
     });
     calendar.render();
});

原始答案代码（v3 及更低版本）：

$.get(calendarUrl).then(function (data) {
// parse the ics data
var jcalData = ICAL.parse(data.trim());
var comp = new ICAL.Component(jcalData);
var eventComps = comp.getAllSubcomponents("vevent");
// console.log(JSON.stringify(eventComps));
// map them to FullCalendar events
var events = $.map(eventComps, function (item) {
    if (item.getFirstPropertyValue("class") == "PRIVATE") {
        return null;
    }
    else {
        return {
            "title": item.getFirstPropertyValue("summary") + ";",
            "start": item.getFirstPropertyValue("dtstart").toJSDate(),
            "end": item.getFirstPropertyValue("dtend").toJSDate(),
            "location": item.getFirstPropertyValue("location")
        };
    }
});

// refresh the control
calendarCtrl.fullCalendar('destroy');
calendarCtrl.fullCalendar({
    events: events,
    timeFormat: "H:mm",
    displayEventEnd: true,
    eventRender: function (event, element) {
        // console.log(element);
        // append location
        if (event.location != null && event.location != "") {
            element.append("<span>" + event.location + "</span>");
        }
    },
    header: {
        left: 'title',
        center: '',
        right: 'today,month,basicWeek,listDay prev,next'
    }
});
});

【讨论】：

【解决方案2】：

您需要为 fullcalendar 编写自己的扩展（类似于 fullcalendar 提供的 gcal.js），您可以将其称为 ical.js

您应该知道编写一个完整的 ical 解析器可能会非常耗费精力，因此您可能需要考虑在后端使用 google 日历，除非您有令人信服的理由。

如果您继续为 fullcalendar 开发自己的扩展，您可能想看看现有的 jquery ical 解析器（here - 免责声明：我从未尝试过这个插件）

【讨论】：

看起来有一个活跃的拉取请求 - github.com/fullcalendar/fullcalendar/pulls
FullCalendar 现在支持 iCalendar：fullcalendar.io/docs/icalendar

【解决方案3】：

从 V 5.5.0 开始支持 iCalendar 作为事件源。

您可以在此处查看文档：https://fullcalendar.io/docs/icalendar

例子：

import dayGridPlugin from '@fullcalendar/daygrid'
import iCalendarPlugin from '@fullcalendar/icalendar'

var calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, iCalendarPlugin],
  events: {
    url: 'https://mywebsite/icalendar-feed.ics',
    format: 'ics'
  }
})

calendar.render()

【讨论】：

【解决方案4】：

您可以将其导入 Google 日历，然后将 Google 日历导入 FullCalendar。

【讨论】：

这是一个糟糕的解决方案
它在 2013 年对我有用。它比编写扩展更容易。

【解决方案5】：

如果您有一个 wordpress 网站，那么有一个应用程序可以做到这一点。 http://wordpress.org/extend/plugins/amr-ical-events-list/

如果您没有 wordpress 网站，请提供更多信息，以便人们可以针对您的情况提供更充分的建议 - 有一些专门的 icalendar 脚本 - 我有一段时间没看它们了，所以不能保证任何例如： http://phpicalendar.net/

【讨论】：