使用 Javascript 将事件保存为 ICalendar

Question

大家好，有人知道如何将活动保存为 google 日历或 ICal 吗？场景是我有开始和结束日期以及活动的标题。如果我单击该按钮，它应该通过 google 日历保存或打开浏览器并保存该事件。我尝试了 jquery.icalendar 但运气不好，它只适用于 Jquery V1.1.1。现在我正在使用 jQuery v3.2.1 你们中的任何人都知道如何在不使用 jquery.icalendar 的情况下做到这一点，因为它已经过时了。

编辑：想实现类似于 this 我现在正在使用它但是有没有办法在没有这个插件的情况下做我自己的代码

Answer 1

这似乎是一个有趣的挑战，所以我花了一天的大部分时间看看我能做什么。我强烈建议使用库或 PHP 以便正确保留所有格式等。

您可以尝试以下一种方法：

示例代码：https://jsfiddle.net/Twisty/6sye1f75/

JavaScript

var eventData = {
  "title": "ebay live auction test",
  "desc": "this is a live auction test \n testing new line.",
  "location": "my house",
  "url": "http://www.ebay.com",
  "time": {
    "start": "March 12, 2014 14:00:00",
    "end": "march 13, 2014 15:30:00",
    "zone": "-07:00",
    "allday": false
  },
};

$(function() {
  function adjustToUTC(dateObj, zone) {
    var dateOut = new Date(dateObj),
      hours, mins;

    if (isNaN(dateOut.getTime())) {
      return new Date();
    }

    // adjust to UTC
    hours = zone.substring(1, 3);
    mins = zone.substring(4, 6);
    if (zone.substring(0, 1) === '-') {
      dateOut.setHours(dateOut.getHours() + (hours - 0));
      dateOut.setMinutes(dateOut.getMinutes() + (mins - 0));
    } else {
      dateOut.setHours(dateOut.getHours() - hours);
      dateOut.setMinutes(dateOut.getMinutes() - mins);
    }
    return dateOut;
  }

  function getDatePart(part, digits) {
    part = part.toString();
    while (part.length < digits) {
      part = '0' + part;
    }
    return part;
  }

  function getUTCTime(dateObj) {
    var newDateObj = adjustToUTC(dateObj, eventData.time.zone);
    return getDatePart(newDateObj.getFullYear(), 4) + getDatePart(newDateObj.getMonth() + 1, 2) + getDatePart(newDateObj.getDate(), 2) + 'T' + getDatePart(newDateObj.getHours(), 2) + getDatePart(newDateObj.getMinutes(), 2) + getDatePart(newDateObj.getSeconds(), 2) + 'Z';
  }

  function prepareEvent(data) {
    var tData = "";
    tData += "BEGIN:VCALANDER\r\n";
    tData += "VERSION:2.0\r\n";
    tData += "METHOD:PUBLISH\r\n";
    tData += "BEGIN:VEVENT\r\n";
    tData += "SUMMARY:" + data.title + "\r\n";
    tData += "DESCRIPTION:" + data.desc + "\r\n";
    tData += "LOCATION:" + data.location + "\r\n";
    tData += "URL:" + data.url + "\r\n";
    tData += "UID:00" + Math.floor(Math.random() * 10000000) + "-Custom@test\r\n";
    tData += "SEQUENCE:0\r\n";
    tData += "DTSTAMP:" + getUTCTime(data.time.start) + "\r\n";
    tData += "DTSTART:" + getUTCTime(data.time.start) + "\r\n";
    tData += "DTEND:" + getUTCTime(data.time.end) + "\r\n";
    tData += "END:VEVENT\r\n";
    tData += "END:VCALENDAR\r\n";
    return tData;
  }

  $(".show-event.ics pre").html(prepareEvent(eventData));
  $.each(eventData, function(k, v) {
    var item = $("<li>");
    if (k !== "time") {
      item.append($("<label>").html(k + ":"));
      item.append($("<span>").html(v));
    } else {
      item.append($("<label>").html(k + ":"));
      item.append($("<ul>"));
      item.find("ul").append($("<li>").append($("<label>").html("start:")).append($("<span>").html(v.start + " (" + v.zone + ")")));
      item.find("ul").append($("<li>").append($("<label>").html("end:")).append($("<span>").html(v.end + " (" + v.zone + ")")));
    }
    $(".show-event.html ul").append(item);
  });

  $(".controlgroup").controlgroup();

  $("#save-event").click(function(e) {
    var contents = prepareEvent(eventData);
    var name = eventData.title.replace(/ /g, "_") + ".ics";
    $(this)[0].download = name;
    $(this).attr("href", "data:text/calendar;" + encodeURIComponent(content));
    console.log($(this));
    return true;
  });
});

参考：

Create a file in memory for user to download, not through server
How to create a dynamic file + link for download in Javascript?

我还从这里收获了一些功能：jQuery AddCalEvent Plugin Demos。

由于其工作方式，无法在 jsfiddle 中对其进行测试。我可能会把它移到 plnkr 或 codepen 看看它是否在那里工作。

使用 Javascript 将事件保存为 ICalendar

Save event as ICalendar using Javascript

javascript

jquery

icalendar