# trilium-timeline

Interactive timeline in html+js widget for [Trilium Notes](https://github.com/zadam/trilium), using [vis.js](https://visjs.org/) timeline.

## What is this?

Fetches notes with specific labels to be displayed as events in various ways (single point, range, background box) grouped in multiple categories and with varying colors, uses root note's promoted attributes to easily set the timeline values (present marker, start/end values for the initial loaded view).

Used for my own personal purposes (prepping and tracking a Pathfinder 2e tabletop campaign) and will require tweaking to be used for other labels and note structures.

## Install

Download this repo and extract it.
Inside of Trilium, right click the folder you want to import into and click "Import into Note" at the bottom.
Select the "Timeline Widget Import.zip" archive.
Import without changing any of the the default options (although if you get issues maybe try unchecking stuff like Safe Import which i'm assuming can sometimes decide to not import things as they are, although I've never had problems).
The Timeline Widget is then imported but nothing is displayed yet, as indicated by the message "Render HTML doesn't have required relation to function properly", because the renderNote attribute has been automatically disabled on import. To fix this, go to the Owned attributes tab at the top and look for "~disabled:renderNote=render.html", normally the last attribute in the list. Click on it and remove the "disabled:" part so as to have "renderNote" as the attribute name. Save and now the widget should display.

## Usage

The widget fetches notes with a "date_start" label attribute (and treats them as events of various types), and "date_birth"/"date_death" label attributes (and treats them as date of birth/death "agent" events).
A note can also contain a "date_type" label attribute that sorts it into different categories. The existing ones (the ones I need, you will need to change them in "script.js" if you want your own) are "session", "astrological", "player", "omen", "agent", "local", "global" and "era". All of those have their own toggle button to show/hide the events under that category.
The "era" type is special and will be displayed as a block in the background of the global events category (used for large ranges of years).

The widget has 3 label promoted attributes (of type Text and not Date to be able to enter hours/minutes/seconds) that can be configured, they are all in the format "YYYY-MM-DD:hh:mm:ss" but you can enter simply "YYYY", or "YYYY-MM-DD:hh" and not the entire date.
They are as follows :

- "timeline_start" and "timeline_end" are the range of dates where the view STARTS, to be able to determine where (and how "zoomed-in") you want the timeline to be when loading the widget. You may still scroll and drag to the rest of the full timeline, this only affects the visible part of the timeline in the view when loading.
- "timeline_present" optionally shows a red vertical line indicating where the "present" is if you need a timeline where the present isn't actually the present (in my case, to represent the present within the setting of a tabletop campaign, which I change session to session). Be aware this line doesn't stay still, so if you stay on the widget for some time you will notice it moves ahead in real time, but of course resets every time you load/render the widget.

The events showing up on the timeline can be hovered and clicked.