如何创建 Javascript 书签来从当前页面创建 Outlook 日历事件？

Question

我想创建一个小书签（运行一些 JavaScript 的书签），它获取当前网页的 URL 以及一些基本内容，然后打开一个新窗口（或选项卡）并为 Outlook 日历事件加注星标。

我发现这篇关于使用 Google 日历执行此操作的旧帖子： https://medium.com/@wifeofvillon/bookmarklet-to-create-a-google-calendar-event-from-title-and-hours-ee03656719d8

还找到了这个 Chrome 插件：https://chrome.google.com/webstore/detail/add-to-calendar/jnbpajadakhkpcncmbfhkgaaoioofkfd

我想做类似的事情，这样当我坐在网页上时，我可以单击书签并创建一个日历事件以返回此页面以供以后查看。应已设置以下属性：

Title: {Current web page title}

Location: {Current web page URL}

Description: <h1>{Current Web Page Title}</h1><div><a href="{Current Web Page Url}">{Current Web Page Title}</a></div><div>{Current Web Page Selected Text}</div>

从这里，我可以使用有关我何时开始处理此问题、阅读此内容等信息来自定义活动。

我认为这对于当我有更多时间时回来查看重要内容、安排时间处理与 URL 相关的任务等很有用。

Answer 1

我可以生成一个 ICS 文件，它是日历事件的标准格式。下载的文件有望由您的日历应用程序打开，以允许导入该事件。

使用

window.getSelection()

获取所选文本， 创建改编自here的 ICS 文件， 下载该文件改编自How to create adynamic file + link for download in Javascript?.

这是片段的代码：

function convertDate(date) {
  var event = new Date().toISOString();
  event = event.split("T")[0];
  event = event.split("-");
  event = event.join("");
  return event;
}


function download_file(name, contents, mime_type) {
  mime_type = mime_type || "text/plain";

  var blob = new Blob([contents], {
    type: mime_type
  });

  var dlink = document.createElement('a');
  dlink.download = name;
  dlink.href = window.URL.createObjectURL(blob);
  dlink.onclick = function(e) {
    var href = this.href;
    setTimeout(function() {
      window.URL.revokeObjectURL(href);
    }, 1500);
  };

  dlink.click();
  dlink.remove();
}

var selectedText = window.getSelection() || "";
var ics = `BEGIN:VCALENDAR
CALSCALE:GREGORIAN
METHOD:PUBLISH
PRODID:-//Test Cal//EN
VERSION:2.0
BEGIN:VEVENT
UID:test-1
DTSTART;VALUE=DATE:${convertDate()}
SUMMARY:${document.title}
DESCRIPTION:${selectedText}
LOCATION:${window.location}
END:VEVENT
END:VCALENDAR  
`;

download_file('webpage-event.ics', ics);

还有先生的礼貌。 coles 网站 这是书签的最终缩小结果：

javascript:(function()%7Bfunction%20convertDate(日期)%20%7Bvar%20event%20%3D%20new%20Date().toISOString()%3Bevent%20%3D%20event.split(%22T%22) %5B0%5D%3Bevent%20%3D%20event.split(%22-%22)%3Bevent%20%3D%20event.join(%22%22)%3Breturn%20event%3B%7Dfunction%20download_file(名称% 2C%20contents%2C%20mime_type)%20%7Bmime_type%20%3D%20mime_type%20%7C%7C%20%22text%2Fplain%22%3Bvar%20blob%20%3D%20new%20Blob(%5Bcontents%5D% 2C%20%7Btype%3A%20mime_type%7D)%3Bvar%20dlink%20%3D%20document.createElement('a')%3Bdlink.download%20%3D%20name%3Bdlink.href%20%3D%20窗口。 URL.createObjectURL(blob)%3Bdlink.onclick%20%3D%20function(e)%20%7Bvar%20href%20%3D%20this.href%3BsetTimeout(function()%20%7Bwindow.URL.revokeObjectURL(href) %3B%7D%2C%201500)%3B%7D%3Bdlink.click()%3Bdlink.remove()%3B%7Dvar%20selectedText%20%3D%20window.getSelection()%20%7C%7C%20% 22%22%3Bvar%20ics%20%3D%20%60BEGIN%3AVCALENDAR%5CnCALSCALE%3AGREGORIAN%5CnMETHOD%3APUBLISH%5CnPRODID%3A-%2F%2FTest%20Cal%2F%2FEN%5CnVERSION%3A2.0%5CnBEGIN%3AVEVENT %5CnUID%3Atest-1%5CnDTSTART%3BVALUE%3DDATE%3A%24%7BconvertDate()%7D%5CnSUMMARY%3A%24%7Bdocument.title%7D%5CnDESCRIPTION%3A%24%7BselectedText%7D%5CnLOCATION%3A%24 %7Bwindow.location%7D%5CnEND%3AVEVENT%5CnEND%3AVCALENDAR%5Cn%60%3Bdownload_file('网页事件.ics'%2C%20ics)%7D)()