gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 23:44:25 +01:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

docs(user): document launch bar widgets
Some checks are pending
Checks / main (push) Waiting to run
Details

Browse Source
This commit is contained in:
Elian Doran 2025-12-05 23:24:18 +02:00
parent a205108681
commit c8c6d1bb1e
No known key found for this signature in database
16 changed files with 796 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json generated vendored
View File

File diff suppressed because one or more lines are too long

701
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Calendar.html generated vendored
View File

@ -6,416 +6,395 @@
a start date and optionally an end date, as an event.</p> a start date and optionally an end date, as an event.</p>
<p>The Calendar view has multiple display modes:</p> <p>The Calendar view has multiple display modes:</p>
<ul> <ul>
<li data-list-item-id="e304b5ae296d7f47b813dcd8cf2dbba42">Week view, where all the 7 days of the week (or 5 if the weekends are <li>Week view, where all the 7 days of the week (or 5 if the weekends are
hidden) are displayed in columns. This mode allows entering and displaying hidden) are displayed in columns. This mode allows entering and displaying
time-specific events, not just all-day events.</li> time-specific events, not just all-day events.</li>
<li data-list-item-id="ea8d70da10fa78ede209782b485e2de49">Month view, where the entire month is displayed and all-day events can <li>Month view, where the entire month is displayed and all-day events can
be inserted. Both time-specific events and all-day events are listed.</li> be inserted. Both time-specific events and all-day events are listed.</li>
<li <li>Year view, which displays the entire year for quick reference.</li>
data-list-item-id="e057acab031bcf780ce3055e534ab2d61">Year view, which displays the entire year for quick reference.</li> <li>List view, which displays all the events of a given month in sequence.</li>
<li
data-list-item-id="e5528ab7e56ada969592f5d35896a4808">List view, which displays all the events of a given month in sequence.</li>
</ul> </ul>
<p>Unlike other Collection view types, the Calendar view also allows some <p>Unlike other Collection view types, the Calendar view also allows some
kind of interaction, such as moving events around as well as creating new kind of interaction, such as moving events around as well as creating new
ones.</p> ones.</p>
<h2>Creating a calendar</h2> <h2>Creating a calendar</h2>
<figure class="table"> <table>
<table> <thead>
<thead> <tr>
<tr> <th></th>
<th>&nbsp;</th> <th></th>
<th>&nbsp;</th> <th></th>
<th>&nbsp;</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>1</td>
<td>1</td> <td>
<td> <img src="2_Calendar_image.png">
<img src="2_Calendar_image.png"> </td>
</td> <td>The Calendar View works only for Collection note types. To create a new
<td>The Calendar View works only for Collection note types. To create a new note, right click on the note tree on the left and select Insert note after,
note, right click on the note tree on the left and select Insert note after, or Insert child note and then select <em>Collection</em>.</td>
or Insert child note and then select <em>Collection</em>.</td> </tr>
</tr> <tr>
<tr> <td>2</td>
<td>2</td> <td>
<td> <img src="3_Calendar_image.png">
<img src="3_Calendar_image.png"> </td>
</td> <td>Once created, the “View type” of the Collection needs changed to “Calendar”,
<td>Once created, the “View type” of the Collection needs changed to “Calendar”, by selecting the “Collection Properties” tab in the ribbon.</td>
by selecting the “Collection Properties” tab in the ribbon.</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</figure>
<h2>Creating a new event/note</h2> <h2>Creating a new event/note</h2>
<ul> <ul>
<li data-list-item-id="ed78c7591e6504413d89bf60a172ba7fa">Clicking on a day will create a new child note and assign it to that particular <li>Clicking on a day will create a new child note and assign it to that particular
day. day.
<ul> <ul>
<li data-list-item-id="e9313832f770bbe02f6dbfdce57cb040c">You will be asked for the name of the new note. If the popup is dismissed <li>You will be asked for the name of the new note. If the popup is dismissed
by pressing the close button or escape, then the note will not be created.</li> by pressing the close button or escape, then the note will not be created.</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e154d333887462e26c059d7b3218ffd10">It's possible to drag across multiple days to set both the start and end <li>It's possible to drag across multiple days to set both the start and end
date of a particular note. date of a particular note.
<br> <br>
<img src="Calendar_image.png"> <img src="Calendar_image.png">
</li> </li>
<li data-list-item-id="e8685250a40c8a75bf4a44ba3c4218495">Creating new notes from the calendar will respect the <code>~child:template</code> relation <li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
if set on the Collection note.</li> if set on the Collection note.</li>
</ul> </ul>
<h2>Interacting with events</h2> <h2>Interacting with events</h2>
<ul> <ul>
<li data-list-item-id="ef3868587f3133abbb6a43f1e7ba73df4">Hovering the mouse over an event will display information about the note. <li>Hovering the mouse over an event will display information about the note.
<br> <br>
<img src="7_Calendar_image.png"> <img src="7_Calendar_image.png">
</li> </li>
<li data-list-item-id="e0349fc14f198e77629a20fce7b910cbd">Left clicking the event will open a&nbsp;<a class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;to <li>Left clicking the event will open a&nbsp;<a class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;to
edit the note in a popup while allowing easy return to the calendar by edit the note in a popup while allowing easy return to the calendar by
just dismissing the popup. just dismissing the popup.
<ul> <ul>
<li data-list-item-id="e40934ee8189ac129ce9a62f1a34f90fd">Middle clicking will open the note in a new tab.</li> <li>Middle clicking will open the note in a new tab.</li>
<li data-list-item-id="ed673e7b92f8713cfa950d6030deeb658">Right click will offer more options including opening the note in a new <li>Right click will offer more options including opening the note in a new
split or window.</li> split or window.</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e42434d681c96273852be7111b2464e66">Drag and drop an event on the calendar to move it to another day.</li> <li>Drag and drop an event on the calendar to move it to another day.</li>
<li <li>The length of an event can be changed by placing the mouse to the right
data-list-item-id="ec6982b2bdebadd048f01b2c9d5204375">The length of an event can be changed by placing the mouse to the right
edge of the event and dragging the mouse around.</li> edge of the event and dragging the mouse around.</li>
</ul> </ul>
<h2>Interaction on mobile</h2> <h2>Interaction on mobile</h2>
<p>When Trilium is on mobile, the interaction with the calendar is slightly <p>When Trilium is on mobile, the interaction with the calendar is slightly
different:</p> different:</p>
<ul> <ul>
<li data-list-item-id="e9eccdc329cafb680914a2fea2bf3b967">Clicking on an event triggers the contextual menu, including the option <li>Clicking on an event triggers the contextual menu, including the option
to open in&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_ZjLYv08Rp3qC">Quick edit</a>.</li> to open in&nbsp;<a class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>.</li>
<li <li>To insert a new event, touch and hold the empty space. When successful,
data-list-item-id="e095306ea6783bd216f3848b3d5b6bcba">To insert a new event, touch and hold the empty space. When successful,
the empty space will become colored to indicate the selection. the empty space will become colored to indicate the selection.
<ul> <ul>
<li data-list-item-id="e678eb6949bb0dcb609880b66f4c218b8">Before releasing, drag across multiple spaces to create multi-day events.</li> <li>Before releasing, drag across multiple spaces to create multi-day events.</li>
<li <li>When released, a prompt will appear to enter the note title.</li>
data-list-item-id="eb77c1f5e90700a75c40fd0dab32a9266">When released, a prompt will appear to enter the note title.</li>
</ul> </ul>
</li> </li>
<li data-list-item-id="e824cd65431fa336433aa1e4186c1578d">To move an existing event, touch and hold the event until the empty space <li>To move an existing event, touch and hold the event until the empty space
near it will become colored. near it will become colored.
<ul> <ul>
<li data-list-item-id="e13dbb47246890b5f93404cf3e34feb3f">At this point the event can be dragged across other days on the calendar.</li> <li>At this point the event can be dragged across other days on the calendar.</li>
<li <li>Or the event can be resized by tapping on the small circle to the right
data-list-item-id="e011cdfec5a11fc783c5cc0acb2b704e1">Or the event can be resized by tapping on the small circle to the right end of the event.</li>
end of the event.</li> <li>To exit out of editing mode, simply tap the empty space anywhere on the
<li data-list-item-id="ea38d2059d0736ad6d172bbb9f1cde4aa">To exit out of editing mode, simply tap the empty space anywhere on the calendar.</li>
calendar.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<h2>Configuring the calendar view</h2> <h2>Configuring the calendar view</h2>
<p>In the <em>Collections</em> tab in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>, <p>In the <em>Collections</em> tab in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>,
it's possible to adjust the following:</p> it's possible to adjust the following:</p>
<ul> <ul>
<li data-list-item-id="e5226aa5761f9b2fd47d0c38c252e7f74">Hide weekends from the week view.</li> <li>Hide weekends from the week view.</li>
<li data-list-item-id="e62c9e62cfbc2d6e2e4587cfce90143a0">Display week numbers on the calendar.</li> <li>Display week numbers on the calendar.</li>
</ul> </ul>
<h2>Configuring the calendar using attributes</h2> <h2>Configuring the calendar using attributes</h2>
<p>The following attributes can be added to the Collection type:</p> <p>The following attributes can be added to the Collection type:</p>
<figure <table>
class="table"> <thead>
<table> <tr>
<thead> <th>Name</th>
<tr> <th>Description</th>
<th>Name</th> </tr>
<th>Description</th> </thead>
</tr> <tbody>
</thead> <tr>
<tbody> <td><code>#calendar:hideWeekends</code>
<tr> </td>
<td><code>#calendar:hideWeekends</code> <td>When present (regardless of value), it will hide Saturday and Sundays
</td> from the calendar.</td>
<td>When present (regardless of value), it will hide Saturday and Sundays </tr>
from the calendar.</td> <tr>
</tr> <td><code>#calendar:weekNumbers</code>
<tr> </td>
<td><code>#calendar:weekNumbers</code> <td>When present (regardless of value), it will show the number of the week
</td> on the calendar.</td>
<td>When present (regardless of value), it will show the number of the week </tr>
on the calendar.</td> <tr>
</tr> <td><code>#calendar:initialDate</code>
<tr> </td>
<td><code>#calendar:initialDate</code> <td>Change the date the calendar opens on. When not present, the calendar
</td> opens on the current date.</td>
<td>Change the date the calendar opens on. When not present, the calendar </tr>
opens on the current date.</td> <tr>
</tr> <td><code>#calendar:view</code>
<tr> </td>
<td><code>#calendar:view</code> <td>
</td> <p>Which view to display in the calendar:</p>
<td> <ul>
<p>Which view to display in the calendar:</p> <li data-list-item-id="e2cd230dc41f41fe91ee74d7d1fa87372"><code>timeGridWeek</code> for the <em>week</em> view;</li>
<ul> <li data-list-item-id="eee1dba4c6cc51ebd53d0a0dd52044cd6"><code>dayGridMonth</code> for the <em>month</em> view;</li>
<li data-list-item-id="e2cd230dc41f41fe91ee74d7d1fa87372"><code>timeGridWeek</code> for the <em>week</em> view;</li> <li data-list-item-id="ed8721a76a1865dac882415f662ed45b9"><code>multiMonthYear</code> for the <em>year</em> view;</li>
<li data-list-item-id="eee1dba4c6cc51ebd53d0a0dd52044cd6"><code>dayGridMonth</code> for the <em>month</em> view;</li> <li data-list-item-id="edf09a13759102d98dac34c33eb690c05"><code>listMonth</code> for the <em>list</em> view.</li>
<li data-list-item-id="ed8721a76a1865dac882415f662ed45b9"><code>multiMonthYear</code> for the <em>year</em> view;</li> </ul>
<li data-list-item-id="edf09a13759102d98dac34c33eb690c05"><code>listMonth</code> for the <em>list</em> view.</li> <p>Any other value will be dismissed and the default view (month) will be
</ul> used instead.</p>
<p>Any other value will be dismissed and the default view (month) will be <p>The value of this label is automatically updated when changing the view
used instead.</p> using the UI buttons.</p>
<p>The value of this label is automatically updated when changing the view </td>
using the UI buttons.</p> </tr>
</td> <tr>
</tr> <td><code>~child:template</code>
<tr> </td>
<td><code>~child:template</code> <td>Defines the template for newly created notes in the calendar (via dragging
</td> or clicking).</td>
<td>Defines the template for newly created notes in the calendar (via dragging </tr>
or clicking).</td> </tbody>
</tr> </table>
</tbody> <p>In addition, the first day of the week can be either Sunday or Monday
</table> and can be adjusted from the application settings.</p>
</figure> <h2>Configuring the calendar events using attributes</h2>
<p>In addition, the first day of the week can be either Sunday or Monday <p>For each note of the calendar, the following attributes can be used:</p>
and can be adjusted from the application settings.</p> <table>
<h2>Configuring the calendar events using attributes</h2> <thead>
<p>For each note of the calendar, the following attributes can be used:</p> <tr>
<figure <th>Name</th>
class="table"> <th>Description</th>
<table> </tr>
<thead> </thead>
<tr> <tbody>
<th>Name</th> <tr>
<th>Description</th> <td><code>#startDate</code>
</tr> </td>
</thead> <td>The date the event starts, which will display it in the calendar. The
<tbody> format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
<tr> sign).</td>
<td><code>#startDate</code> </tr>
</td> <tr>
<td>The date the event starts, which will display it in the calendar. The <td><code>#endDate</code>
format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus </td>
sign).</td> <td>Similar to <code>startDate</code>, mentions the end date if the event spans
</tr> across multiple days. The date is inclusive, so the end day is also considered.
<tr> The attribute can be missing for single-day events.</td>
<td><code>#endDate</code> </tr>
</td> <tr>
<td>Similar to <code>startDate</code>, mentions the end date if the event spans <td><code>#startTime</code>
across multiple days. The date is inclusive, so the end day is also considered. </td>
The attribute can be missing for single-day events.</td> <td>The time the event starts at. If this value is missing, then the event
</tr> is considered a full-day event. The format is <code>HH:MM</code> (hours in
<tr> 24-hour format and minutes).</td>
<td><code>#startTime</code> </tr>
</td> <tr>
<td>The time the event starts at. If this value is missing, then the event <td><code>#endTime</code>
is considered a full-day event. The format is <code>HH:MM</code> (hours in </td>
24-hour format and minutes).</td> <td>Similar to <code>startTime</code>, it mentions the time at which the event
</tr> ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td>
<tr> </tr>
<td><code>#endTime</code> <tr>
</td> <td><code>#color</code>
<td>Similar to <code>startTime</code>, it mentions the time at which the event </td>
ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td> <td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
</tr> hex such as <code>#FF0000</code>). This will also change the color of the
<tr> note in other places such as the note tree.</td>
<td><code>#color</code> </tr>
</td> <tr>
<td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or <td><code>#calendar:color</code>
hex such as <code>#FF0000</code>). This will also change the color of the </td>
note in other places such as the note tree.</td> <td><strong>❌️ Removed since v0.100.0. Use</strong> <code>**#color**</code> <strong>instead.</strong>
</tr> <br>
<tr> <br>Similar to <code>#color</code>, but applies the color only for the event
<td><code>#calendar:color</code> in the calendar and not for other places such as the note tree.</td>
</td> </tr>
<td> <tr>
<p><strong>❌️ Removed since v0.100.0. Use </strong><code><strong>#color</strong></code><strong> instead.</strong> <td><code>#iconClass</code>
</p> </td>
<p>Similar to <code>#color</code>, but applies the color only for the event <td>If present, the icon of the note will be displayed to the left of the
in the calendar and not for other places such as the note tree.</p> event title.</td>
</td> </tr>
</tr> <tr>
<tr> <td><code>#calendar:title</code>
<td><code>#iconClass</code> </td>
</td> <td>Changes the title of an event to point to an attribute of the note other
<td>If present, the icon of the note will be displayed to the left of the than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol).
event title.</td> See <em>Use-cases</em> for more information.</td>
</tr> </tr>
<tr> <tr>
<td><code>#calendar:title</code> <td><code>#calendar:displayedAttributes</code>
</td> </td>
<td>Changes the title of an event to point to an attribute of the note other <td>Allows displaying the value of one or more attributes in the calendar
than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol). like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
See <em>Use-cases</em> for more information.</td> <br>
</tr> <br>
<tr> <img src="9_Calendar_image.png">&nbsp;&nbsp;&nbsp;
<td><code>#calendar:displayedAttributes</code> <br>
</td> <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp;
<td>Allows displaying the value of one or more attributes in the calendar <br>
like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>It can also be used with relations, case in which it will display the
<br> title of the target note:&nbsp;&nbsp;&nbsp;&nbsp;
<br> <br>
<img src="9_Calendar_image.png">&nbsp;&nbsp;&nbsp; <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
<br> </td>
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp; </tr>
<br> <tr>
<br>It can also be used with relations, case in which it will display the <td><code>#calendar:startDate</code>
title of the target note:&nbsp;&nbsp;&nbsp;&nbsp; </td>
<br> <td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
<br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code> The label name <strong>must not be</strong> prefixed with <code>#</code>.
</td> If the label is not defined for a note, the default will be used instead.</td>
</tr> </tr>
<tr> <tr>
<td><code>#calendar:startDate</code> <td><code>#calendar:endDate</code>
</td> </td>
<td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>). <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
The label name <strong>must not be</strong> prefixed with <code>#</code>. which is being used to read the end date.</td>
If the label is not defined for a note, the default will be used instead.</td> </tr>
</tr> <tr>
<tr> <td><code>#calendar:startTime</code>
<td><code>#calendar:endDate</code> </td>
</td> <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the start time.</td>
which is being used to read the end date.</td> </tr>
</tr> <tr>
<tr> <td><code>#calendar:endTime</code>
<td><code>#calendar:startTime</code> </td>
</td> <td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the end time.</td>
which is being used to read the start time.</td> </tr>
</tr> </tbody>
<tr> </table>
<td><code>#calendar:endTime</code>
</td> <h2>How the calendar works</h2>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute <p>
which is being used to read the end time.</td> <img src="11_Calendar_image.png">
</tr> </p>
</tbody> <p>The calendar displays all the child notes of the Collection that have
</table> a <code>#startDate</code>. An <code>#endDate</code> can optionally be added.</p>
</figure> <p>If editing the start date and end date from the note itself is desirable,
<h2>How the calendar works</h2> the following attributes can be added to the Collection note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
<p>
<img src="11_Calendar_image.png">
</p>
<p>The calendar displays all the child notes of the Collection that have
a <code>#startDate</code>. An <code>#endDate</code> can optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the Collection note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date" #label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes </code></pre> #hidePromotedAttributes </code></pre>
<p>This will result in:</p> <p>This will result in:</p>
<p> <p>
<img src="10_Calendar_image.png"> <img src="10_Calendar_image.png">
</p> </p>
<p>When not used in a Journal, the calendar is recursive. That is, it will <p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of look for events not just in its child notes but also in the children of
these child notes.</p> these child notes.</p>
<h2>Use-cases</h2> <h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3> <h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day <p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar notes. In order to do so change the note type of the Journal note (calendar
root) to Collection and then select the Calendar View.</p> root) to Collection and then select the Calendar View.</p>
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>) <p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the attribute, the calendar will know that it's in a calendar and apply the
following:</p> following:</p>
<ul> <ul>
<li data-list-item-id="ef8dd9e289abf6cb973bd379d219170ae">The calendar events are now rendered based on their <code>dateNote</code> attribute <li>The calendar events are now rendered based on their <code>dateNote</code> attribute
rather than <code>startDate</code>.</li> rather than <code>startDate</code>.</li>
<li data-list-item-id="e35671ad2eee19bba69bb31f3f33cce37">Interactive editing such as dragging over an empty era or resizing an <li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li> event is no longer possible.</li>
<li data-list-item-id="e8930686b36fb7fa36d123f9f202cbc75">Clicking on the empty space on a date will automatically open that day's <li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li> note or create it if it does not exist.</li>
<li data-list-item-id="edc838e74ed3479fe2f0fbfaef462dbbb">Direct children of a day note will be displayed on the calendar despite <li>Direct children of a day note will be displayed on the calendar despite
not having a <code>dateNote</code> attribute. Children of the child notes not having a <code>dateNote</code> attribute. Children of the child notes
will not be displayed.</li> will not be displayed.</li>
</ul> </ul>
<p> <img src="8_Calendar_image.png" width="1217"
<img src="8_Calendar_image.png" width="1217" height="724">
height="724">
</p> <h3>Using a different attribute as event title</h3>
<h3>Using a different attribute as event title</h3> <p>By default, events are displayed on the calendar by their note title.
<p>By default, events are displayed on the calendar by their note title. However, it is possible to configure a different attribute to be displayed
However, it is possible to configure a different attribute to be displayed instead.</p>
instead.</p> <p>To do so, assign <code>#calendar:title</code> to the child note (not the
<p>To do so, assign <code>#calendar:title</code> to the child note (not the calendar/Collection note), with the value being <code>name</code> where <code>name</code> can
calendar/Collection note), with the value being <code>name</code> where <code>name</code> can be any label (make not to add the <code>#</code> prefix). The attribute can
be any label (make not to add the <code>#</code> prefix). The attribute can also come through inheritance such as a template attribute. If the note
also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead.</p>
does not have the requested label, the title of the note will be used instead.</p> <table>
<figure <thead>
class="table"> <tr>
<table> <th>&nbsp;</th>
<thead> <th>&nbsp;</th>
<tr> </tr>
<th>&nbsp;</th> </thead>
<th>&nbsp;</th> <tbody>
</tr> <tr>
</thead> <td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
<tbody> </td>
<tr> <td>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre> <p>&nbsp;</p>
</td> <figure class="image image-style-align-center">
<td> <img style="aspect-ratio:445/124;" src="5_Calendar_image.png"
<p>&nbsp;</p> width="445" height="124">
<figure class="image image-style-align-center"> </figure>
<img style="aspect-ratio:445/124;" src="5_Calendar_image.png" </td>
width="445" height="124"> </tr>
</figure> </tbody>
</td> </table>
</tr>
</tbody> <h3>Using a relation attribute as event title</h3>
</table> <p>Similarly to using an attribute, use <code>#calendar:title</code> and set
</figure> it to <code>name</code> where <code>name</code> is the name of the relation
<h3>Using a relation attribute as event title</h3> to use.</p>
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set <p>Moreover, if there are more relations of the same name, they will be displayed
it to <code>name</code> where <code>name</code> is the name of the relation as multiple events coming from the same note.</p>
to use.</p> <table>
<p>Moreover, if there are more relations of the same name, they will be displayed <thead>
as multiple events coming from the same note.</p> <tr>
<figure class="table"> <th>&nbsp;</th>
<table> <th>&nbsp;</th>
<thead> </tr>
<tr> </thead>
<th>&nbsp;</th> <tbody>
<th>&nbsp;</th> <tr>
</tr> <td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre>
</thead> </td>
<tbody> <td>
<tr> <img src="6_Calendar_image.png" width="294"
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre> height="151">
</td> </td>
<td> </tr>
<img src="6_Calendar_image.png" width="294" </tbody>
height="151"> </table>
</td> <p>Note that it's even possible to have a <code>#calendar:title</code> on the
</tr> target note (e.g. “John Smith”) which will try to render an attribute of
</tbody> it. Note that it's not possible to use a relation here as well for safety
</table> reasons (an accidental recursion &nbsp;of attributes could cause the application
</figure> to loop infinitely).</p>
<p>Note that it's even possible to have a <code>#calendar:title</code> on the <table>
target note (e.g. “John Smith”) which will try to render an attribute of <thead>
it. Note that it's not possible to use a relation here as well for safety <tr>
reasons (an accidental recursion &nbsp;of attributes could cause the application <th>&nbsp;</th>
to loop infinitely).</p> <th>&nbsp;</th>
<figure class="table"> </tr>
<table> </thead>
<thead> <tbody>
<tr> <tr>
<th>&nbsp;</th> <td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
<th>&nbsp;</th> </td>
</tr> <td>
</thead> <figure class="image image-style-align-center">
<tbody> <img style="aspect-ratio:296/150;" src="1_Calendar_image.png"
<tr> width="296" height="150">
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre> </figure>
</td> </td>
<td> </tr>
<figure class="image image-style-align-center"> </tbody>
<img style="aspect-ratio:296/150;" src="1_Calendar_image.png" </table>
width="296" height="150">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>

33
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets.html generated vendored Normal file
View File

@ -0,0 +1,33 @@
<p>Launch bar widgets are a subset of&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>&nbsp;that
can be used to render custom buttons and widgets inside the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.</p>
<h2>Creating a launch bar widget</h2>
<p>Unlike&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>,
the process of setting up a launch bar widget is slightly different:</p>
<ol>
<li data-list-item-id="e3111af31ab8707d93fb9e7feb1ac804d">Create a Code note of type <em>JavaScript (front-end)</em>.
<ul>
<li data-list-item-id="ea71ac173fc302483b5f571fd8bbd4142">The script itself uses the same concepts as&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>,
including the use of a <code spellcheck="false">NoteContextAwareWidget</code> or
a <code spellcheck="false">BasicWidget</code> (according to needs).</li>
<li
data-list-item-id="e06c05a8bdfaa11ad4214ccc5405f50cc">As examples, see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/4Gn3psZKsfSm/_help_IPArqVfDQ4We">Note Title Widget</a>&nbsp;and&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/4Gn3psZKsfSm/_help_gcI7RPbaNSh3">Analog Watch</a>.</li>
</ul>
</li>
<li data-list-item-id="e31368cfb0655cfc527347b9dcbfa7d17">Don't set <code spellcheck="false">#widget</code>, as that attribute is
reserved for&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>.</li>
<li
data-list-item-id="e26f51e3ad87cebfa6c72504dab691804">In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>,
select <em>Configure launchbar</em>.</li>
<li data-list-item-id="ebd6a4fab8be5557cb958d6bf87b65d84">In the <em>Visible Launchers</em> section, select <em>Add a custom widget</em>.</li>
<li
data-list-item-id="ef1cb61670f561ad918be4f072d325bc7">Give the newly created launcher a name (and optionally a name).</li>
<li
data-list-item-id="e0b141f895a6a9973f31a71ba99471a49">In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;section,
modify the <em>widget</em> field to point to the newly created note.</li>
<li
data-list-item-id="e5218927546ad96070b3028534e93131b">Refresh the UI.&nbsp;</li>
</ol>

84
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch.html generated vendored Normal file
View File

@ -0,0 +1,84 @@
<figure class="image">
<img style="aspect-ratio:1007/94;" src="Analog Watch_image.png"
width="1007" height="94">
</figure>
<p>This is a more intricate example of a basic widget, which displays an
analog watch in the launch bar. Unlike note-context aware widgets, basic
widgets don't react to note navigation.</p><pre><code class="language-application-javascript-env-frontend">const TPL = `
&lt;div class="analog-watch" style="
position: relative;
height: 38px;
width: 38px;
border-radius: 50%;
background: white;
border: 2px solid #444;
flex-shrink: 0;
"&gt;
&lt;!-- hour hand --&gt;
&lt;div class="hand hour" style="
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 10px;
background: #333;
transform-origin: bottom center;
"&gt;&lt;/div&gt;
&lt;!-- minute hand --&gt;
&lt;div class="hand minute" style="
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 13px;
background: #111;
transform-origin: bottom center;
"&gt;&lt;/div&gt;
&lt;!-- second hand --&gt;
&lt;div class="hand second" style="
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 15px;
background: red;
transform-origin: bottom center;
"&gt;&lt;/div&gt;
&lt;/div&gt;
`;
class AnalogWatchWidget extends api.BasicWidget {
doRender() {
this.$widget = $(TPL);
const hourHand = this.$widget.find('.hand.hour')[0];
const minuteHand = this.$widget.find('.hand.minute')[0];
const secondHand = this.$widget.find('.hand.second')[0];
const update = () =&gt; {
const now = new Date();
const sec = now.getSeconds();
const min = now.getMinutes();
const hour = now.getHours();
const secDeg = sec * 6;
const minDeg = min * 6 + sec * 0.1;
const hourDeg = (hour % 12) * 30 + min * 0.5;
secondHand.style.transform = `translate(-50%, -100%) rotate(${secDeg}deg)`;
minuteHand.style.transform = `translate(-50%, -100%) rotate(${minDeg}deg)`;
hourHand.style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
};
update();
this._interval = setInterval(update, 1000);
}
cleanup() {
if (this._interval) clearInterval(this._interval);
}
}
module.exports = new AnalogWatchWidget();</code></pre>

BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch_image.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

31
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html generated vendored Normal file
View File

@ -0,0 +1,31 @@
<figure class="image">
<img style="aspect-ratio:1007/94;" src="Note Title Widget_image.png"
width="1007" height="94">
</figure>
<p>This is an example of a note context-aware widget, which reacts to the
currently opened note and refreshes automatically as the user navigates
through the notes.</p>
<p>In this example, the title of the note is displayed. It works best on
the <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x0JgW8UqGXvq">horizontal layout</a>.</p><pre><code class="language-application-javascript-env-frontend">const TPL = `\
&lt;div style="
display: flex;
height: 53px;
width: fit-content;
font-size: 0.75em;
contain: none;
align-items: center;
flex-shrink: 0;
padding: 0 1em;
"&gt;&lt;/div&gt;`;
class NoteTitleWidget extends api.NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
}
async refreshWithNote(note) {
this.$widget.text(note.title);
}
}
module.exports = new NoteTitleWidget();</code></pre>

BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget_image.png generated vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

2
docs/Developer Guide/!!!meta.json vendored
View File

@ -1,6 +1,6 @@
{ {
"formatVersion": 2, "formatVersion": 2,
"appVersion": "0.99.5", "appVersion": "0.100.0",
"files": [ "files": [
{ {
"isClone": false, "isClone": false,

2
docs/Developer Guide/Developer Guide/Documentation.md vendored
View File

@ -1,5 +1,5 @@
# Documentation # Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/MKeODWYVO3J3/Documentation_image.png" width="205" height="162"> There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/hOX4EFIkAwyJ/Documentation_image.png" width="205" height="162">
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>. * The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers. * The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

172
docs/User Guide/!!!meta.json vendored
View File

@ -1,6 +1,6 @@
{ {
"formatVersion": 2, "formatVersion": 2,
"appVersion": "0.99.5", "appVersion": "0.100.0",
"files": [ "files": [
{ {
"isClone": false, "isClone": false,
@ -15645,6 +15645,176 @@
] ]
} }
] ]
},
{
"isClone": false,
"noteId": "4Gn3psZKsfSm",
"notePath": [
"pOsGYCXsbNQG",
"CdNpE2pqjmI6",
"yIhgI5H7A2Sm",
"4Gn3psZKsfSm"
],
"title": "Launch Bar Widgets",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-dock-left",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "shareAlias",
"value": "launch-bar-widgets",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "x3i7MxGccDuM",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "IPArqVfDQ4We",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "gcI7RPbaNSh3",
"isInheritable": false,
"position": 100
}
],
"format": "markdown",
"dataFileName": "Launch Bar Widgets.md",
"attachments": [],
"dirFileName": "Launch Bar Widgets",
"children": [
{
"isClone": false,
"noteId": "IPArqVfDQ4We",
"notePath": [
"pOsGYCXsbNQG",
"CdNpE2pqjmI6",
"yIhgI5H7A2Sm",
"4Gn3psZKsfSm",
"IPArqVfDQ4We"
],
"title": "Note Title Widget",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "shareAlias",
"value": "note-title",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "shareAlias",
"value": "note-title-widget",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "x0JgW8UqGXvq",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Note Title Widget.md",
"attachments": [
{
"attachmentId": "hgXS32zcBfVp",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Note Title Widget_image.png"
}
]
},
{
"isClone": false,
"noteId": "gcI7RPbaNSh3",
"notePath": [
"pOsGYCXsbNQG",
"CdNpE2pqjmI6",
"yIhgI5H7A2Sm",
"4Gn3psZKsfSm",
"gcI7RPbaNSh3"
],
"title": "Analog Watch",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "shareAlias",
"value": "analog-watch",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
"dataFileName": "Analog Watch.md",
"attachments": [
{
"attachmentId": "49vpwjjOEAm7",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Analog Watch_image.png"
}
]
}
]
} }
] ]
}, },

2
docs/User Guide/User Guide/Collections/Calendar.md vendored
View File

@ -76,7 +76,7 @@ For each note of the calendar, the following attributes can be used:
| `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). | | `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
| `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). | | `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
| `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. | | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
| `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.**<br><br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. | | `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.** <br> <br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
| `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. | | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
| `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. | | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:      <br> <br>![](9_Calendar_image.png)     <br> <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`    <br> <br>It can also be used with relations, case in which it will display the title of the target note:     <br> <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` | | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:      <br> <br>![](9_Calendar_image.png)     <br> <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`    <br> <br>It can also be used with relations, case in which it will display the title of the target note:     <br> <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |

16
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets.md vendored Normal file
View File

@ -0,0 +1,16 @@
# Launch Bar Widgets
Launch bar widgets are a subset of <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a> that can be used to render custom buttons and widgets inside the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>.
## Creating a launch bar widget
Unlike <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, the process of setting up a launch bar widget is slightly different:
1. Create a Code note of type _JavaScript (front-end)_.
* The script itself uses the same concepts as <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, including the use of a `NoteContextAwareWidget` or a `BasicWidget` (according to needs).
* As examples, see <a class="reference-link" href="Launch%20Bar%20Widgets/Note%20Title%20Widget.md">Note Title Widget</a> and <a class="reference-link" href="Launch%20Bar%20Widgets/Analog%20Watch.md">Analog Watch</a>.
2. Don't set `#widget`, as that attribute is reserved for <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>.
3. In the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>, select _Configure launchbar_.
4. In the _Visible Launchers_ section, select _Add a custom widget_.
5. Give the newly created launcher a name (and optionally a name).
6. In the <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> section, modify the _widget_ field to point to the newly created note.
7. Refresh the UI.

85
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch.md vendored Normal file
View File

@ -0,0 +1,85 @@
# Analog Watch
<figure class="image"><img style="aspect-ratio:1007/94;" src="Analog Watch_image.png" width="1007" height="94"></figure>
This is a more intricate example of a basic widget, which displays an analog watch in the launch bar. Unlike note-context aware widgets, basic widgets don't react to note navigation.
```javascript
const TPL = `
<div class="analog-watch" style="
position: relative;
height: 38px;
width: 38px;
border-radius: 50%;
background: white;
border: 2px solid #444;
flex-shrink: 0;
">
<!-- hour hand -->
<div class="hand hour" style="
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 10px;
background: #333;
transform-origin: bottom center;
"></div>
<!-- minute hand -->
<div class="hand minute" style="
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 13px;
background: #111;
transform-origin: bottom center;
"></div>
<!-- second hand -->
<div class="hand second" style="
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 15px;
background: red;
transform-origin: bottom center;
"></div>
</div>
`;
class AnalogWatchWidget extends api.BasicWidget {
doRender() {
this.$widget = $(TPL);
const hourHand = this.$widget.find('.hand.hour')[0];
const minuteHand = this.$widget.find('.hand.minute')[0];
const secondHand = this.$widget.find('.hand.second')[0];
const update = () => {
const now = new Date();
const sec = now.getSeconds();
const min = now.getMinutes();
const hour = now.getHours();
const secDeg = sec * 6;
const minDeg = min * 6 + sec * 0.1;
const hourDeg = (hour % 12) * 30 + min * 0.5;
secondHand.style.transform = `translate(-50%, -100%) rotate(${secDeg}deg)`;
minuteHand.style.transform = `translate(-50%, -100%) rotate(${minDeg}deg)`;
hourHand.style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
};
update();
this._interval = setInterval(update, 1000);
}
cleanup() {
if (this._interval) clearInterval(this._interval);
}
}
module.exports = new AnalogWatchWidget();
```

BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch_image.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

32
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md vendored Normal file
View File

@ -0,0 +1,32 @@
# Note Title Widget
<figure class="image"><img style="aspect-ratio:1007/94;" src="Note Title Widget_image.png" width="1007" height="94"></figure>
This is an example of a note context-aware widget, which reacts to the currently opened note and refreshes automatically as the user navigates through the notes.
In this example, the title of the note is displayed. It works best on the [horizontal layout](../../../Basic%20Concepts%20and%20Features/UI%20Elements/Vertical%20and%20horizontal%20layout.md).
```javascript
const TPL = `\
<div style="
display: flex;
height: 53px;
width: fit-content;
font-size: 0.75em;
contain: none;
align-items: center;
flex-shrink: 0;
padding: 0 1em;
"></div>`;
class NoteTitleWidget extends api.NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
}
async refreshWithNote(note) {
this.$widget.text(note.title);
}
}
module.exports = new NoteTitleWidget();
```

BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget_image.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB