Question

有人可以告诉我是否有任何jquery插件动态创建.ics文件，其值来自页面div值，就像会有

一样

<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文件链接到“添加到日历”链接，以便将其添加到Outlook？

Answer 1

您需要以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:me@google.com\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO::me@gmail.com\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或谷歌日历将完成剩下的工作。

Answer 2

这是一个老问题，但我有一些想法可以让你开始（或任何其他需要做类似任务的人）。

用JavaScript创建文件内容，并打开文件：

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

据推测，您可能希望将该代码添加到表单按钮的onclick事件中。

我没有Outlook方便，所以我不确定它是否会自动识别文件类型，但它可能会。

希望这有帮助。

Answer 3

根据我在网上和本网站上找到的内容，无法在IE中使用此功能，因为您需要包含某些标题才能让IE知道下载此文件。

window.open方法适用于Chrome和Firefox但不适用于IE，因此您可能需要重新构建代码以使用服务器端语言生成和下载ICS文件。

可在此question

中找到更多内容

Answer 4

这种方法运行正常但是对于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。

希望这会有所帮助。

Answer 5

虽然这是一个较老的问题，但我一直在寻找前端解决方案。我最近偶然发现了 ICS.js library看起来像你正在寻找的答案。

使用javascript或jquery动态创建.ics文件？

5 个答案: