Save event as ICalendar using Javascript

Question

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

Looks like the File Format can be found here: https://icalendar.org/ — Twisty, Jun 02 '17 at 17:51
@Twisty yeah something like that... Here's a sample http://www.jqueryscript.net/demo/jQuery-Plugin-To-Add-Custom-Events-To-Online-Calendar-Apps-AddCalEvent/ I would like to achieve similar to this link — MadzQuestioning, Jun 02 '17 at 18:10
What have you tried so far? What example data can you provide? Need more to go on than just what you have provided so far. — Twisty, Jun 02 '17 at 18:30
You can look at the source for http://www.jqueryscript.net/demo/jQuery-Plugin-To-Add-Custom-Events-To-Online-Calendar-Apps-AddCalEvent/src/AddCalEvent.js and see almost everything it does. You could then build your script to mimic those actions and events. — Twisty, Jun 02 '17 at 18:42
If you look at the code of the site you linked, all the web-based calendars are populated with simple form posts, and the ical export is broken. The site's source code also contains a link for instructions on on how the web calendar integration was created--start there. — Dave, Jun 02 '17 at 19:41

score 0 · Accepted Answer · answered Jun 02 '17 at 23:07

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:

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.

This seems interesting and would love to try this approach. You are correct about doing it on server side. Maybe I'll try that approach thanks for this — MadzQuestioning, Jun 03 '17 at 19:56

Save event as ICalendar using Javascript

1 Answers1

Linked