Clickable Joplin Links in GCal Preview Cards

stevemagruder · 2023-02-03T20:54:41.449Z

If you ever wanted a straightforward method for connecting a Google Calendar event to a Joplin note, notebook or tag, keep reading.

Requirements

You will need to be using or have installed:

Joplin and the web-based Google Calendar, of course.
Google Chrome/Windows and Firefox/Linux** browsers (other browsers haven't been tested yet, but any Chromium-based browser that supports extensions should work)
Tampermonkey extension (downloadable for Chrome here)
Windows 10 or 11 (other operating systems haven't been tested yet), Ubuntu 22.04**

**reported compatibility

Background: Linking into Joplin

Joplin gives you a context menu option of "Copy external link" for individual notes, notebooks and tags. This places an application link (technically x-callback-url link) into your OS clipboard, in the form of joplin://x-callback-url/openNote?id={32-digit ID} for notes, for example. These application links are supposed to work a lot like regular (http:// or https://) web links but instead link into your application, Joplin in this case. To date, many applications don't support these kind of links.

Read more about Joplin's External URL Links and the x-callback-url specification.

Script to enable linking into Joplin from Google Calendar

I have created a Tampermonkey script using JavaScript that, when loaded, allows you to paste any of these (bare) external links into an event's description when using the web-based Google Calendar, and then be able to view and use them as active links in the event's preview card (the box that pops up when you single-click the event) at any time thereafter. The links will appear as "Joplin note", "Joplin notebook" or "Joplin tag".

Here's a sample event preview card, with these links in a suggested built-in styling (which can be turned off by setting USE_CUSTOM_STYLE to false in the script):

CJLGPC

The links had been entered in the event thusly:
CJLGPC_event

Installation

Here's how to install the script:

Download the zipped script from my Google Drive here. (I may host this on GitHub at some point)
Extract CJLGPC.js from the .zip file.
Open CJLGPC.js in Notepad or any text editor. Select all (Ctrl-A in Windows) and copy (Ctrl-C in Windows).
Click the Tampermonkey extension's icon (usually in your Chrome toolbar) and then click "Create a new script'...''. Alternatively, open your Tampermonkey dashboard and click the "+" tab.
Select all and paste, overwriting the default script with this one. Save (Ctrl+S in Windows).
Go to your Google Calendar. If already loaded in a tab, reload it.

Support and thanks

I wrote this script to start as simple as possible, to nail the basic need I had. I strived to make it compatible with other GCal extensions and add-ons. Please let me know of any incompatibilities.

My time available for support is limited, but please feel free to ask questions or request enhancements in this topic.

Special thanks go to fabiosangregorio on Github who wrote a Chrome extension that clued me into how to access the GCal event preview card. I am using event handling code and some coding structure from that project. Also, thanks to me for mastering Regular Expressions years ago - that was really handy for my purposes here!

Version History

0.1 - Initial release. Consider this to be beta as long as it is 0.x.

stevemagruder · 2023-02-03T23:06:31.429Z

Here's an example of genuine use in my modded version of Google Calendar:
chrome_MWxX8LrN2J

Eduardo · 2023-02-04T00:27:01.037Z

Hi @stevemagruder
Excellent contribution. I was looking any similar tools that you have created. Thanks.
I have installed and using it in OS Ubuntu 22.04 with Tampermonkey installed in Firefox v.109.0.1. And it is working well.

stevemagruder · 2023-02-04T17:49:02.528Z

Eduardo:

Excellent contribution. I was looking any similar tools that you have created. Thanks.
I have installed and using it in OS Ubuntu 22.04 with Tampermonkey installed in Firefox v.109.0.1. And it is working well.

You're welcome, and thank you for reporting on compatibility. I have no similar tools available at this time. I am a former software developer with very rusty skill sets, and was just highly motivated to create this script for my own use, but thought others could use it as well.

stevemagruder · 2023-02-05T15:10:51.717Z

I revised the OP for clarity by adding headings. Also, I added reported compatibility to date.

groovetherapy · 2023-02-08T00:02:09.953Z

Looking forward to giving this a try

Heyooooooo · 2023-11-30T01:03:19.514Z

Hey, is it possible to add this functionality for the details text in tasks as well?
This would be great, since my biggest struggle with Joplin is the Todo-System, since it makes sense for me to be able to schedule todos in a calendar view and see when I'm supposed to be working on what easily.
However if I have lots of notes for a todo, it would be great to be able to link to a Joplin Todo from the Google Calendar one.
Thanks!

Eduardo · 2024-09-09T20:44:10.936Z

Hi @stevemagruder
Do you know if this script is working, today I found the link is not going to the Joplin Notes. I have created a fresh link, updating the script in Tampermonkey dashboard, but it seems at least for me the external link in Google calendar is not activated.

Tampermonkey version 5.1.1
Firefox v, 130.0
Joplin 3.1.8 (prod, linux) Ubuntu 24.04