How can I create a Javascript bookmarklet to create an Outlook calendar event from the current page?

Question

I'd like to create a bookmarklet (bookmark that runs some JavaScript) that takes the URL of the current web page, along with some basic content, and opens a new window (or tab) and stars an Outlook calendar event.

I found this old post about doing this with Google Calendars: https://medium.com/@wifeofvillon/bookmarklet-to-create-a-google-calendar-event-from-title-and-hours-ee03656719d8

Also found this Chrome addin: https://chrome.google.com/webstore/detail/add-to-calendar/jnbpajadakhkpcncmbfhkgaaoioofkfd

I'd like to do something similar so when I'm sitting on a webpage, I can click the bookmark and create a calendar event to come back to this page for later review. The following properties should already be set:

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>

From here, I can customize the event with info about when I'm going to come work on this, read this, etc.

I see this as useful to come back and review important content when I have more time, schedule time to work on tasks tied to a URL, etc.

Answer 1

I can generate an ICS file which is a standard format for calendar events. The downloaded file will hopefully be opened by your calendar application to allow import of that event.

Selected text is taken using window.getSelection(), Creating an ICS file adapted from here, Downloading that file adapted from How to create a dynamic file + link for download in Javascript?.

This is the code for the snippet:

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);

And courtesy of Mr. coles website this is the final minified result for the bookmarklet:

javascript:(function()%7Bfunction%20convertDate(date)%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(name%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%20window.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('webpage-event.ics'%2C%20ics)%7D)()