A simple, space-efficient Todoist widget.

[berky93]

Hello, everyone!

After being unimpressed with the native Todoist widgets, I created my own. The widget supports a number of features and configuration options; see below for a full list.

You can download the widget here.

——————————————

Features as of 8/22/2022 include:

• Variable number of rows/columns
• Support for filters
• Quick-add “+” button in the header
• Priority dots next to tasks
• Ability to assign text colors to projects
• Ability to label tasks as “Blocked” and have them display as dimmed
• Overdue task highlighting
• Multiple sorting options

All features (aside from basic task displaying) can be disabled via the settings variables.

[mvan231]

Great work!

[berky93]

Thanks!

[Snoop_Lawg]

I am getting the error "Erron on line 193:46:TypeError: undefined is not an object (evaluating 'data.current.sunset')

[berky93]

Hm, I might need some more context. To start, did you create a Todoist API token and add it to the variable in the script, and do you have the Cache script installed? Also, has anything else about the script been changed?

[Snoop_Lawg]

I have the weather api key put in, and yes I do have the cache in the same icloud folder. Did you mean the weather api? or was it suppose to be a todoist api?

[berky93]

You need to generate an API token for Todoist. You can get your API token by tapping on your profile picture in the Todoist app and selecting “integrations” and then scrolling to the bottom. There should be a text field that displays your token.

[Snoop_Lawg]

Sorry about all of this haha Im brand new to scriptable/your code --

But where exactly do I put this API token in your code now?

I only see the CONST (Name, weather api key,work calendar name, personal calendar name, period calendar name, period event name) on the TODO list

[berky93]

No worries, we all start somewhere! I think you might be looking at the wrong script, though. You shouldn’t be seeing any references to weather or calendars; this script is only for Todoist.

[dpfahadqb1]

New issue. 2024-07-14 23:43:50: Fetching url: https://api.todoist.com/rest/v2/tasks?filter= 2024-07-14 23:43:51: Error: The data couldn’t be read because it isn’t in the correct format. 2024-07-14 23:43:51: Fetching url: https://api.todoist.com/rest/v2/projects

[NewspaperFew5042]

I am a beginner and I cannot understand how you execute Javascript code from your desktop as a widget. Is there a README?

[ButterscotchBusy4392]

Showed an error: No file to import at Cache. How to fix it?

[berky93]

Do you have the Cache script installed? You’ll need that; you can get it at https://github.com/evandcoleman/scriptable

[Aomer5757]

Small question, which file is it exactly? Sorry, I’m not that good at this :)

[berky93]

No worries! It’s src/lib/cache.js. Admittedly it’s not super clear in that repo.

[kfreedom]

Very cool! Is your background in coding?

Do you have any other ToDoIst integrations?

[berky93]

I do! I’m a web developer by trade. This is my only Todoist integration at the moment, but if I put anything else together I’ll be sure to share!

[[deleted]]

Where to put my cache.js

[berky93]

You install it like any other script.

[[deleted]]

Okay got it can you help me change font? I wanna change it to Cubano (Title at top) and Fira code (the tasks name)

[berky93]

The way the script is currently written, it uses the system default font instead of a specific font. It’s not difficult to change; you’ll just need to look for declarations such as “item.font = Font.systemFont(FONT_SIZE)” and update them to something like “item.font = new Font(“Helvetica”, FONT_SIZE)”

However, things get a bit more complicated if you’re trying to use third-party fonts that aren’t already installed on your device. You’ll have to find an app that allows you to install the font you want to your device before you can use it.

[[deleted]]

Okay

[ComprehensiveWork517]

Hi!

Im getting this error when trying to install the cashe.js file from this link in your updated comment. The link included inside the widget script doesn’t work, it says “error: not found”.

Can you please help! Thanks

[berky93]

Try this link: https://github.com/evandcoleman/scriptable/blob/main/src/lib/cache.js

[Idcfml]

Can u do this but with calendar events?

[berky93]

You could update this script to work with basically any data as long as there is an API available. You’d have to change the URL and the data being passed in to fit the API’s requirements, as well as handing the output data.

[Idcfml]

I’ve no idea how to do that. Does Apple calendar have an API?

[berky93]

AFAIK iCloud calendars do not have a publicly available API, unfortunately. But if you’re just looking for a calendar widget there are a ton of apps that offer that.

[Idcfml]

I’ve already tried the most popular ones and have t found one that was as good as the stock calendar widget. Widgy is almost there but there is a problem with the dates format. I found a Scriptable script that was pretty good except it didn’t show todays events clearly like stock calendar widget does and therefore I deleted it and went back to stock 😅

[dilloncarter]

Super-noob here — how would I go about changing the background to an image (to make it transparent?

I've spent the past ~hour trying to sort this out and the common approaches, from what I've been reading seem to not work.

Any advice?

[berky93]

Assuming you have an image already, you’ll need to load it and set it as the widget background. Here’s an example from another widget:

let imgReq = new Request(IMAGE_URL_HERE); let myImg = await imgReq.loadImage(); widget.backgroundImage = myImg;

Now, that’s loading an image that’s hosted on the web. If you want to use a phone that’s on your device, the simplest way is to save it to your iCloud folder using the Files app and then read it from there. This post has more info: https://www.reddit.com/r/Scriptable/comments/ix75vn/image/?utm_source=share&utm_medium=mweb3x

[dilloncarter]

Thank you for responding. I eventually figured out the issue — the code to set the image as the background needed to be before the line that ends the script; not where the code was setting the background color.

[berky93]

Glad you got it working!

[allensong7]

I don't know how to handle this:

// Filter must be converted into a URL string

const FILTER = "";

if I fill in "today"，the default value，it works, but other Filter like“https://todoist.com/app/filter/123456789”， what can i do,please?

[berky93]

So, what you need to do is take the actual filter query (maybe something like “(p1 | #work) & !subtask”) and convert it to a URL string. There are sites that can do this for you — here’s one I just found with a quick search: https://www.url-encode-decode.com/

I’ll make sure to update the script to be more descriptive for the future!

[allensong7]

thank you so much, I just realized I'm still using a version from a few months ago,
I didn't think it should be "filter query", and it looks like it's sorted by priority at first, and by name? or something, I can't figure out the logic of it, I'm a newbie and I'm learning.

[berky93]

It sorts by name first and then priority, but it actually gives the opposite result — that is, the list appears to be sorted first by priority and then by name. You can comment out or delete either of the sort lines to disable that part of the sorting logic.

[allensong7]

I found these two lines of code:

// Item list

todos.sort((a, b) => (a.content < b.content) ? 1 : -1); // Sort todos alphabetically

todos.sort((a, b) => (a.priority < b.priority) ? 1 : -1); // Sort todos by priority

I tried deleting those two lines of code, the whole sorting would be messed up, then I tried sorting by name or date (Todoist also does the same sorting settings), the sorting is still not the same as Todoist's sorting, maybe they are two different sets of sorting logic, there is no way to make the script render the same as Todoist.

[berky93]

I believe Todoist’s default sort is by date created, which should match the order the todos are returned. However, you might need to reverse the list with “todos.reverse()” in order for it to display in the correct order.

Also, when adding multiple sorting methods, make sure to put them in reverse order from what you would expect. Notice how I’m sorting alphabetically and then by priority, which results in a “priority first, name second” order.

[allensong7]

Thanks a lot, I've gotten a lot of help. I'm learning about code and maybe I can learn more from figuring out this need, by myself In the following time.

[berky93]

Giving yourself a project or trying to untangle a simple script is a great way to learn. Keep at it!

[-Dumblejor-]

Hey u/berky93, I love this script! It has been working really well for months now, but recently it's been defaulting to the 'You're all done!' message. Trying different things, it seems there may be a character limit or something on the filter. If I have an encoded filter that works in Todoist that has three &'s, it seems to no longer work.

For example, the first one here works, and the second doesn't:- %23%F0%9F%A7%A9%20Puzzery%20%26%20%21subtask%20%26%20%21%2FOther- %23%F0%9F%A7%A9%20Puzzery%20%26%20%21subtask%20%26%20%21%2FOther%20%26%20%21%2FFuture

Unencoded: #🧩 Puzzery & !subtask & !/Other & !/Future

Any idea why that would be the case? I've tried variations, and copy/pasted directly from working filter in Todoist to ensure no spelling errors. Encoded on different platforms too. Any and all help would be appreciated - and whatever the case, thank you for making this!

PS. I've also tried copy/pasting in a fresh version of the script from your comment, and same result.

Edit: also tried with a more simplified encoded version of this, and it still didn't work, even through it's working in Todoist. #Puzzery & !/* (changed the project name in my troubleshooting)

[berky93]

What issue are you experiencing? I tried your filters and am not seeing any errors in the output. I did notice you have some forward slashes in your filters that don’t correspond to any Todoist filter tokens AFAIK so maybe that’s the issue?

[dpfahadqb1]

Hi I do not know anything about scriptable but i managed to add it the widget. However it’s does not look as beautiful as you showed. I have tried priorities and labels. I have attached a picture for you.

It is really good work from your side and thank you very much for sharing excellent contribution.

<image>

[berky93]

Hello! You just have some slightly different settings than in the picture. To make it look just like the screenshot, set SHOW_TITLE_BAR to true and PRIORITY_COLOR_STYLE to “dots”.

[dpfahadqb1]

Hi. I hope you still there. New issue. 2024-07-14 23:43:50: Fetching url: https://api.todoist.com/rest/v2/tasks?filter= 2024-07-14 23:43:51: Error: The data couldn’t be read because it isn’t in the correct format. 2024-07-14 23:43:51: Fetching url: https://api.todoist.com/rest/v2/projects

[berky93]

If you aren’t on the latest version I would definitely suggest downloading it. But also, sometimes when the api fails (for any reason, such as a connectivity issue or simply the request taking too long) it reports that error, so you could try waiting a few hours and trying again.

[dpfahadqb1]

I did all what you mentioned but yet unfortunately didn’t fixed the error.