如何在fullcalendar中加载.ics文件?我无法使用php或.net。
如何在fullcalendar中加载.ics文件?我无法使用php或.net。
我成功地完成了它。没有我想象中那么难。我使用ical.js作为ics解析器。解析后,我获得一个包含所有ics信息的JSON对象。然后遍历该对象,根据FullCalendar事件对象的定义构建事件对象。
更新 FullCalendar v4 和重复事件
由于v4更改了初始化代码,下面的代码没有考虑到重复事件,这是一个可以处理重复事件并适用于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'
}
});
});
从V5.5.0版本开始,FullCalendar支持将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()
您可以将其导入到Google日历中,然后再将Google日历导入到FullCalendar中。
如果你有一个WordPress网站,那么就有一个应用程序可以使用。 http://wordpress.org/extend/plugins/amr-ical-events-list/
如果你没有WordPress网站,请提供更多信息,以便人们能够根据你的情况提供更充分的建议 - 有一些专门的iCalendar脚本 - 我已经有一段时间没有看过它们了,所以不能保证任何一个,例如: http://phpicalendar.net/