2011-12-13 75 views
16

有人能告訴我,如果有任何的jQuery插件動態創建的.ics從頁面DIV值未來值文件一樣會有使用javascript或jquery動態創建.ics文件?

<div class="start-time">9:30am</div> 
<div class="end-time">10:30am</div> 
<div class="Location">California</div> 

或JavaScript的方式動態創建的.ics文件?我基本上需要創建.ics文件,並使用JavaScript或jQuery的拉這些值?並將創建的ics文件鏈接到「ADD TO CALENDAR」鏈接,以便將其添加到Outlook中?

回答

1

這是一個老問題,但我有一些想法可以讓你開始(或任何其他需要做類似任務的人)。

和JavaScript來創建文件的內容,並打開文件:

var filedata = $('.start-time, .end-time, .Location').text(); 
window.open("data:text/calendar;charset=utf8," + escape(filedata)); 

你大概會希望該代碼添加到表單按鈕的onclick事件。

我沒有Outlook方便,所以我不知道它是否會自動識別文件類型,但它可能。

希望這會有所幫助。

28

您需要使用ICS格式。你也需要轉換日期和時區;例如。 20120315T170000Z或YYYYMMDDTHHMMSSZ

msgData1 = $('.start-time').text(); 
    msgData2 = $('.end-time').text(); 
    msgData3 = $('.Location').text(); 

    var icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Our Company//NONSGML v1.0//EN\nBEGIN:VEVENT\nUID:[email protected]\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:[email protected]\nORGANIZER;CN=Me:MAILTO::[email protected]\nDTSTART:" + msgData1 +"\nDTEND:" + msgData2 +"\nLOCATION:" + msgData3 + "\nSUMMARY:Our Meeting Office\nEND:VEVENT\nEND:VCALENDAR"; 

    $('.test').click(function(){ 
     window.open("data:text/calendar;charset=utf8," + escape(icsMSG)); 
    }); 

上面的示例將創建用於下載的ics文件。用戶將不得不打開它,outlock,iCal或谷歌日曆將完成剩下的工作。

+1

僅供參考:截至8/8/13此代碼無效。 .ics文件下載並打開,但iCal說它無法讀取文件和錯誤:/ 注意:如果刪除「\ n BEGIN:VEVENT \ n」周圍的空格,它將起作用,但不會讓我編輯了6個字符以下的任何東西:( – 2013-08-08 20:30:32

0

這種方法很好,但IE8瀏覽器無法識別文件類型並拒絕打開日曆項目。爲了解決這個問題,我必須在服務器端創建代碼(並通過RESTful服務公開),然後設置響應標頭,如下所示:

@GET 
@Path("generateCalendar/{alias}/{start}/{end}") 
@Produces({ "text/v-calendar" }) 
public Response generateCalendar(
     @QueryParam("alias") final String argAlias, 
     @QueryParam("start") final String argStart, 
     @QueryParam("end") final String argEnd) { 
    ResponseBuilder builder = Response.ok(); 
    builder.header("content-disposition", "attachment;filename=calendar.ics"); 
    builder.entity("BEGIN:VCALENDAR\n<........insert meeting details here......>:VCALENDAR"); 
    return builder.build(); 
} 

這可以通過調用服務URL上的window.location來提供,並且可以在Chrome,Firefox和IE8上運行。

希望這會有所幫助。

1

從我在網上和在這個網站上發現的,它是不可能得到這個工作在IE瀏覽器,因爲你需要包括某些頭讓IE知道下載這個文件。

window.open方法適用於Chrome和Firefox,但不適用於IE,所以您可能需要重構代碼以使用服務器端語言來生成和下載ICS文件。

更可以在此question

0

發現儘管這是一個老問題,我一直在尋找一個前端解決方案,以及。我最近偶然發現了 ICS.js library這看起來像你正在尋找的答案。