Custom sensor component and Lovelace card that displays tasks from Todoist.
The widget allows you to close the tasks from your Home Assistant and syncs it back to Todoist.
The component consists of two parts:
- A sensor, which loads tasks with Todoist API every 60 seconds;
- A card for the Lovelace dashboard, which displays tasks and lets you close them.
We will look at the installation of each of them separately below.
You will need some data from Todoist to continue:
- Get yourself an API token here.
- Decide which projects you want to display.
- Open them in the web app and copy their IDs from the URL.
-
Copy the whole todoist directory to the
/config/
folder of your Home Assistant installation. -
Restart Home Assistant.
-
Now you can add your new custom sensor to the corresponding section in the
configuration.yml
file.sensor: - platform: todoist api_token: <API token> projects: - project_id: 9034956420 - project_id: 6747349569 display_name: "Tasks for today" # Optional, overrides Todoist project's name input_text: # You need this input for passing data from UI to sensor to close tasks todoist_last_closed_task: # Don't change this line name: "Todoist last closed task" # This one you may change max: 100 initial: '' # A pool of closed tasks to display them as checked despite UI refreshes until sensor updates todoist_all_closed_tasks: # Don't change this either name: "Todoist all closed tasks" max: 255 # This is the limit initial: '' # Information about the added task todoist_new_task: # Neither should you change this one name: "Todoist new task" max: 255 initial: ''
-
Restart Home Assistant again, check the logs for errors, and give it some time to fetch the data.
- If you are impatient, you can call the
homeassistant.update_entity
service on newly created sensors.
- If you are impatient, you can call the
Having configured the sensor, it's time to setup the widget.
-
Copy the todoist-card.js card to the
/config/www
directory of your Home Assistant. -
Go to your Home Assistant dashboard, click "Edit dashboard" at the right top corner and after that in the same top right corner choose "Manage resources".
-
Add new resource
/local/todoist-card.js
and click "Create". Go back to your dashboard, empty cache, and hard-refresh the page. -
Click "Add card", choose manual, and use the config below:
type: custom:todoist-card entity_id: sensor.tasks_for_today # Swap to your sensor ID max_entries: 8 # Optional, number of tasks to show (default: 10) show_project_name: true # Optional, show or hide the project name (default: true) show_input_area: false # Optional, show or hide the area for adding a new task (default: true) show_tasks: true # Optional, show or hide the tasks list (default: true) # ^ Might be useful if you only want to be able to add new tasks to a certain project (e.g. grocery list)
You can of course add multiple cards to display multiple projects.
If you want to change any styles, font size or layout — the easiest way is to use card_mod component. It allows you to change any CSS classes to whatever you want.
Contributions are welcome. Feel free to open a PR and send it to review. If you are unsure, open an Issue and ask for advice.