Javascriptを使用してICalendarとしてイベントを保存する

Question

こんにちはみんな、あなたはGoogleカレンダーまたはICalとしてイベントを保存する方法を知っていますか？シナリオは開始日と終了日、そしてイベントのタイトルがあります。ボタンをクリックすると、Googleカレンダーでブラウザを開いて保存し、そのイベントを保存する必要があります。私はjquery.icalendarを試しましたが、Jquery V1.1.1のためだけに運がありません。今はjQuery v3.2.1を使用していますが、jQuery.icalendarを可能な限り古いものとして使用することなく、これを行う方法については誰でも知っています。

編集： はthisに似て達成したいと思い、私は今、それを使用していますが、私自身のコードを実行する方法があり、このプラグインなしで

Answer 1

これは興味深い課題のように思えたので、私はの多くを費やします私ができることを見ている日。ライブラリやPHPを使用して、すべての形式などを適切に保持することを強くお勧めします。

コード例：：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; 
    }); 
}); 

を参照してください：

1. Create a file in memory for user to download, not through server
ここ

あなたが試すかもしれない一つの方法です

2. How to create a dynamic file + link for download in Javascript?

は、私もここから出機能のいくつかを収穫：jQuery AddCalEvent Plugin Demos。

jsfiddleで動作するため、これをテストすることができませんでした。私はこれをplnkrまたはcodepenに移してそこで動作するかどうかを調べることができます。