JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <div class="ui-widget-header ui-corner-top"><i class="fa fa-file-code-o fw"></i> HTML</div>
  <div class="show-event html ui-widget-content ui-corner-bottom">
    <ul></ul>
  </div>
  <div class="ui-widget-header ui-corner-top"><i class="fa fa-calendar fw"></i> ICS</div>
  <div class="show-event ics ui-widget-content ui-corner-bottom">
    <pre></pre>
  </div>
  <div class="controlgroup">
    <a id="save-event" href="">Download Event (.ics)</a>
  </div>
</div>

CSS

.ui-widget-header {
  padding: .2em .4em;
}

.ui-widget-content {
  margin-bottom: 1em;
}

.show-event {
  padding: .2em .4em;
}

.show-event.html ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.show-event.html ul li label {
  display: inline-block;
  width: 100px;
}

.show-event.html ul li ul li {
  padding-left: .4em;
}

.ui-button-icon-only.demo-splitbutton-select {
  width: 1em;
}

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 +=...