Clickable Joplin Links in GCal Preview Cards

[stevemagruder]

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:

1. Joplin and the web-based Google Calendar. The Google Calendar app for Android/IOS is not supported.
2. Google Chrome (Windows/Linux) and Firefox (Linux) browsers. Other browsers haven't been tested yet, but Firefox and any Chromium-based browser that supports extensions should work. Runs rather janky on Linux at this point.
3. Tampermonkey extension (downloadable for Chrome here)
4. Windows 10/11 (other operating systems haven't been tested yet) and Linux (Ubuntu and Linux Mint tested so far)

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".

Note: Only bare links are supported at this time. Embedding the application link in event description text will not work. I may look into supporting this embedding later.

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

The links had been entered in the event thusly:

Installation

Here's how to install the script:

1. Download the zipped script from my Google Drive here. (I may host this on GitHub at some point)
2. Extract CJLGPC.js from the .zip file.
3. Open CJLGPC.js in Notepad or any text editor. Select all (Ctrl-A in Windows) and copy (Ctrl-C in Windows).
4. 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.
5. Select all and paste, overwriting the default script with this one. Save (Ctrl+S in Windows).
6. Go to your Google Calendar. If it's already loaded in a tab, reload the page.

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 (4 Feb 2023) - Initial release. Consider this to be beta as long as it is 0.x.

0.1.1 (23 Feb 2025) - Fixes to adapt to changes in Google Calendar DOM and security expectations in Chrome.

[stevemagruder]

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

[Eduardo]

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]

@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]

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

[groovetherapy]

Looking forward to giving this a try

[Heyooooooo]

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]

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

[stevemagruder]

@Eduardo

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.

Sorry for the delay. I've just looked at this and it indeed is no longer working.

Apparently, Google developers changed the single CSS class for a calendar event into three classes, and I'm not as yet sure how to rewrite the script to cope with it. I have asked the developer of a similar script what he thinks about it. Stay tuned.

[executed]

There is a better solution - a dedicated plugin.
Just read carefully throught the following topic:

3rdparty Universal Web Link

Hi all, I would like to share my project here: IAnyLink - GitHub - benlau/l: App Link to Universal Web Link Although Joplin supports external app links, these links may not be recognized by other website services or applications. For example, if you paste the link in Notion, Google Keep, etc., it is not clickable, and you can't use it to open a local note in Joplin quickly. IAnylink is a solution designed to solve this issue. It turns your app link into a regular web link, making it recogniza…

[Eduardo]

Hi @execueted,
I actually used the solution you mentioned as a workaround, but the alternative provided by @stevemagruder worked better. The main reason is that it allowed us to paste the Joplin external link directly into Google Calendar, without first having to paste it on the site to generate a new Converted Web Link for use and then copy in the calendar.
I know It's not a big deal, but from my perspective, the first approach was more convenient.

[executed]

Oh no-no-no. Just configure the keyboard shortcut right in Joplin.
It's called "Copy universal web link".
You just press the buttons and link is in your clipboard - that simple.

[Eduardo]

Oh thanks, good to know. But unfortunately, I could not find any "Copy universal web link" keyboard shortcut alternative to set up.

[executed]

What do you mean by "Copy universal web link" keyboard shortcut alternative?
You haven't found it in the list of shortcuts?
Try enabling it in plugin settings like this:

Then restart Joplin and try looking for keyboard shortcut again.

[Eduardo]

Oh, OK I was not aware this is a plugin, I understood it was only a link IAnyLink to converted web link. Thanks for the info.

[stevemagruder]

Version 0.1.1 of this script is now available at the Download link in the first post. This has bug fixes but no new features.

[stevemagruder]

I will note that compared to the alternative discussed earlier, my script does not require any external service (or your own implementation of such) to work. You just drop the script into Tampermonkey (an extension many of us use anyway), enable it, and you're good to go. Also, this approach is optimal from a privacy point-of-view, as nothing is potentially trackable from third parties (not to cast any security aspersions on the alternative's main service, of course - it's just about basic risk assessment).

[Eduardo]

Hi @stevemagruder. Thanks for updating the script. Although there are now two good alternatives for using Joplin external links, I have tested your new script version, and it works fine if I put the link in the browser's address bar. However, it does not work as a link when the URL (joplin://x-callback-url/openNote?id=......) is in GCalendar and I try to open it from there. Is there any missing in the script?

[stevemagruder]

The script only makes it linkable from the calendar event's preview card (shown when single-clicking the event), not in any other mode. Since it is working for me, I can't say anything is missing in the script. Sometimes, I have to re-click the event to see the link, especially in Linux.

To assist in figuring out what may be going on, could you provide details about your browser, operating system and any javascript errors that appear in the browser's console when clicking the event?

[stevemagruder]

For the sake of clarity, I revised the OP to emphasize this script works with only the web-based Google Calendar and that only bare application links are supported at this time.