create an ICS file with javascript from an HTML form

Question

I am starting to learn javascript and I have a small project work complete. I would like to take the information from a form and create an ics file for 3 single events - an original date, a 5 day event, a 20 day event. Below is the entire html and javascript code. This will be an internal file, it won't go online.

So far i've been able to create the form and an alert box that pulls the information presented. I would like to keep it scrictly javascript and not jQuery - as that is beyond my skill level and comprehension.

Thank you so much friends. .

<form>
    <fieldset>
    <legend>NUMC Information</legend>
    Handler: <select>
          <option value = "Ronald" >Ronald</option>
          <option value = "Thomas">Thomas</option>
          <option value = "Elizabeth">Elizabeth</option>
        </select>
    </fieldset>
</form>
<br>
<fieldset>
  <legend>FOIL Contact</legend>
  <form>
    First name:<br>
    <input type="text" id="firstname">
    <br>
    Last name:<br>
    <input type="text" id="lastname">
    <br>
    Email:<br>
    <input type="email" id="email">
    <br>
    Phone:<br>
    <input type="text" id="phone">
    </form>
</fieldset>

<br>

<div class="origin-event" >Origin Event">
<form id="eventForm">
<fieldset>
<legend>New FOIL Calendar Event</legend>
<legend>FOIL Origin Date</legend>
<fieldset>

<div>
    Title: <input type="text" id="summary" >
        <br><br>
        Origin Date: <input type="date" id = "originDate"/>
        <br>

</div>
</fieldset>
<br>

<legend>FOIL 5 Day Reminder</legend>
<fieldset>
<div>

        5 Day Reminder Date: <input type="date" id = "5dayDate"/>
        <br>

</div>
</fieldset>
<br>
<legend>FOIL 20 Day Reminder</legend>
<fieldset>
<div>

        20 Day Reminder Date: <input type="date" id = "20dayDate"/>
        <br>
</fieldset>
<br>
    Description:
<br>
    <textarea  id="description" name="description"></textarea>
    <br>
    Location:
    <br>
    <input value="New York" id="location">
</div>
</fieldset>
</form>
</div>
<br>
<div class = "buttons">

</div>

<div class="wrap">
        <button type="button" onclick="getValue()">Create Origin Date Noficiation</button></a>
        <br>

    </div>
<script>
function getValue()
  {
  var title= "Title: " + document.getElementById("summary").value;
  var description = "Description: " + document.getElementById("description").value; 
  var location = "Location: " + document.getElementById("location").value; 

  var originalDate = "Origin Date: " + document.getElementById( "originDate").value;

  var FiveDay = "Five Day: " + document.getElementById( "5dayDate").value; 

  var TwentyDay = "Twenty Day: " + document.getElementById( "20dayDate").value;

  alert(title + "\n" + description + "\n" + location + "\n" + originalDate + "\n" + FiveDay + "\n" + TwentyDay); 
  }


</script>

Answer 1

I found a possible solution at https://github.com/nwcell/ics.js and https://github.com/matthiasanderer/icsFormatter but its just blowing my mind how to manipulate it to fit my needs.

Thoughts?

Answer 2

Thanks everyone for your help.

I have completely the project.

The sample page can be found here: https://dl.dropboxusercontent.com/u/25536938/FOIL%20Reminder.html

The code I came up with was:

<script>
          // Demo


        // access text property of selected option
        var val = "Contact Name: " + sel.options[sel.selectedIndex].text;
          function createEvent() {
            var cal_single = ics();
            var cal = ics(); 

            var sel = document.forms['form'].elements['category'];

            // value property of select list (from selected option)

            var val = sel.value;

            // access text property of selected option

            var val = "Handler: " + sel.options[sel.selectedIndex].text;

            var FiveDaysubject = document.getElementById("summary").value + " (Five Day Reminder)";
            var TwentyDaysubject = document.getElementById("summary").value + " (Twenty Day Reminder)";

            var foilFirst = " Contact First Name: " + document.getElementById("firstname").value;
            var foilLast = " Contact Last Name: " + document.getElementById("lastname").value;
            var foilEmail = " Contact Email: " + document.getElementById("email").value;
            var foilPhone = " Contact Phone: " + document.getElementById("phone").value;

                  var  originalDate = new Date(form.originDate.value);
                 originalDate.setDate(originalDate.getDate() + 1);

            var FiveDayDate = new Date(form.FiveDay.value);
                              FiveDayDate.setDate(FiveDayDate.getDate() + 1);

            var TwentyDayDate = new Date(form.TwentyDay.value);
                              TwentyDayDate.setDate(TwentyDayDate.getDate() + 1);

                var description =  val + foilFirst + foilLast + foilEmail + foilPhone + " Description: " +   document.getElementById("description").value + " Origin Date: " + originalDate;
            var location = "New York";



            cal_single.addEvent(FiveDaysubject, description, '', FiveDayDate, FiveDayDate);
            cal.addEvent(TwentyDaysubject, description, '', TwentyDayDate, TwentyDayDate);

            cal_single.download(FiveDaysubject);
            cal.download(TwentyDaysubject);
          }
        </script>

Answer 3

The original ics.js was a good initiative, but the original has some critical flaws.

There are several forks that solved at least major output problem: Time doesn't show up if minutes and seconds are 0, which looks like a duplicate of Lacking Minute Issue, both totally ignored by the original author.

Specifically, I liked this fork https://github.com/connorbode/ics.js based on having multiple contributors and some pull requests and merges in its history.

Answer 4

You cannot do this purely in Javascript. You'd need some help from the server to make a file.

But you could try using a library called Downloadify and see if that will do it for you!

Cheers!