Nhập iCal (ics) bằng fullcalendar?

Question

Điều gì sẽ cần phải được thực hiện để tải các tệp .ics bằng fullcalendar? Tôi không thể sử dụng php hoặc .net không may.

Answer 1

những gì bạn cần là để viết phần mở rộng của riêng bạn để fullcalendar (tương tự như gcal.js được cung cấp với fullcalendar) một cái gì đó bạn có thể gọi ical.js

Bạn nên biết rằng việc viết một trình phân tích cú pháp ical hoàn chỉnh có thể khá thoát ra để bạn có thể muốn onsider gắn bó với google lịch cho back-end của bạn trừ khi bạn có một lý do compeling.

Nếu bạn đi xuống con đường developping phần mở rộng của riêng bạn cho fullcalendar bạn có thể muốn có một cái nhìn tại một jquery hiện phân tích cú pháp ical (here - từ chối trách nhiệm: Tôi chưa bao giờ thử plugin này)

Answer 2

nếu bạn có một trang web wordpress, có một ứng dụng cho điều đó. http://wordpress.org/extend/plugins/amr-ical-events-list/

nếu bạn không có một trang web wordpress, vui lòng cung cấp một số thông tin để mọi người có thể tư vấn đầy đủ hơn đối với tình hình của bạn với - có một số kịch bản iCalendar chuyên dụng - Tôi đã không nhìn họ cho một thời gian, vì vậy không thể xác minh cho bất kỳ ví dụ: http://phpicalendar.net/

Answer 3

Bạn có thể nhập vào Lịch Google rồi nhập Lịch Google vào FullCalendar.

Answer 4

Tôi quản lý để làm điều đó. Không khó như tôi nghĩ. Tôi sử dụng ical.js làm trình phân tích cú pháp ics. Sau khi phân tích cú pháp, tôi nhận được một đối tượng json chứa tất cả thông tin trong ics. Và sau đó đi qua nó và xây dựng đối tượng sự kiện theo the definition of FullCalendar Event object.

Đây là mã:

$.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' 
    } 
}); 
});