Save event as ICalendar using Javascript

问题

Hi guys anyone of you know how to save an event as google calendar or ICal? Scenario is I have the start and end date and the title of the event. If I click on the button it should save or open a browser via google calendar and save that event. I tried the jquery.icalendar but no luck its only for Jquery V1.1.1. Right now I'm using jQuery v3.2.1 anyone of you have an idea on how to do this without using the jquery.icalendar if possible as its outdated already.

Edit: Would like to achieve similar to this I'm using it right now but is there a way to do my own code without this plugin

回答1:

This seemed like an interesting challenge, so I spend much of the day seeing what I could do. I would strongly suggest using a library or PHP so that all formats and such as retained properly.

Here is one way you might try:

Example Code: 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;
  });
});

Refer to:

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

I also harvested a few of the functions out of here: jQuery AddCalEvent Plugin Demos.

This is not been able to be tested in jsfiddle due to the way it works. I may move this to a plnkr or codepen to see if it works there.

来源：https://stackoverflow.com/questions/44334703/save-event-as-icalendar-using-javascript

标签

javascript

jquery

icalendar