Question

我开始学习javascript，我完成了一个小项目工作。我想从表单中获取信息，并为3个单项活动创建一个ics文件 - 原始日期，5天活动，20天活动。以下是整个html和javascript代码。这将是一个内部文件，它不会上线。

到目前为止，我已经能够创建表单和提醒信息的警告框。我想保持scrictly javascript而不是jQuery - 因为这超出了我的技能水平和理解力。

非常感谢你的朋友们。。

<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

我在https://github.com/nwcell/ics.js和https://github.com/matthiasanderer/icsFormatter找到了一个可能的解决方案，但它只是在想我如何操纵它以满足我的需求。

思考？

Answer 2

感谢大家的帮助。

我完全完成了这个项目。

可以在此处找到示例页面：https://dl.dropboxusercontent.com/u/25536938/FOIL%20Reminder.html

我想出的代码是：

<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

最初的ics.js是一个很好的举措，但原版有一些严重的缺陷。

有几种解决了至少主要输出问题的问题：Time doesn't show up if minutes and seconds are 0，看起来像是Lacking Minute Issue的副本，两者都被原作者完全忽略了。

具体来说，我喜欢这个fork https://github.com/connorbode/ics.js基于有多个贡献者和一些拉取请求并在其历史记录中合并。

Answer 4

你不能纯粹用Javascript来做这件事。您需要服务器提供一些帮助来制作文件。

但您可以尝试使用名为Downloadify的库，看看是否会为您做到这一点！

干杯！

使用HTML表单中的javascript创建ICS文件

4 个答案: