Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-04 22:49:58 +01:00
Code Issues Packages Projects Releases Activity

chore(docs): bring back figure sizes

Browse Source
This commit is contained in:
Elian Doran
2025-04-05 03:33:53 +03:00
parent c80d016305
commit 173fa36fca
38 changed files with 728 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/User Guide/User Guide/Basic Concepts and Features/Notes/Note List.md
View File

@@ -10,7 +10,7 @@ By default, the notes will be displayed in a grid, however there are also some o
### Grid view
![](1_Note%20List_image.png)
<figure class="image image-style-align-center"><img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025" height="655"></figure>
This view presents the child notes in a grid format, allowing for a more visual navigation experience.
@@ -23,12 +23,12 @@ This is the default view type.
### List view
![](Note%20List_image.png)
<figure class="image image-style-align-center"><img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013" height="526"></figure>
In the list view mode, each note is displayed in a single row with only the title and the icon of the note being visible by the default. By pressing the expand button it's possible to view the content of the note, as well as the children of the note (recursively).
### Calendar view
![](2_Note%20List_image.png)
<figure class="image image-style-align-center"><img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090" height="598"></figure>
In the calendar view, child notes are represented as events, with a start date and optionally an end date. The view also has interaction support such as moving or creating new events. See <a class="reference-link" href="Note%20List/Calendar%20View.md">Calendar View</a> for more information.

37
docs/User Guide/User Guide/Basic Concepts and Features/Notes/Note List/Calendar View.md
View File

@@ -1,5 +1,5 @@
# Calendar View
![](4_Calendar%20View_image.png)
<figure class="image image-style-align-center"><img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767" height="606"></figure>
The Calendar view of Book notes will display each child note in a calendar that has a start date and optionally an end date, as an event.
@@ -14,10 +14,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
## Creating a calendar
| | | |
| --- | --- | --- |
| 1 | ![](2_Calendar%20View_image.png) | The Calendar View works only for Book note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select _Book_. |
| 2 | ![](3_Calendar%20View_image.png) | Once created, the “View type” of the Book needs changed to “Calendar”, by selecting the “Book Properties” tab in the ribbon. |
<figure class="table"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td>1</td><td><img src="2_Calendar View_image.png"></td><td>The Calendar View works only for Book note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select <em>Book</em>.</td></tr><tr><td>2</td><td><img src="3_Calendar View_image.png"></td><td>Once created, the “View type” of the Book needs changed to “Calendar”, by selecting the “Book Properties” tab in the ribbon.</td></tr></tbody></table></figure>
## Creating a new event/note
@@ -39,7 +36,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
The following attributes can be added to the book type:
<table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table>
<figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table></figure>
In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
@@ -47,21 +44,7 @@ In addition, the first day of the week can be either Sunday or Monday and can be
For each note of the calendar, the following attributes can be used:
| Name | Description |
| --- | --- |
| `#startDate` | The date the event starts, which will display it in the calendar. The format is `YYYY-MM-DD` (year, month and day separated by a minus sign). |
| `#endDate` | Similar to `startDate`, mentions the end date if the event spans across multiple days. The date is inclusive, so the end day is also considered. The attribute can be missing for single-day events. |
| `#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`). |
| `#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` | 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. |
| `#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%20View_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:startDate` | Allows using a different label to represent the start date, other than `startDate` (e.g. `expiryDate`). The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |
| `#calendar:endDate` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end date. |
| `#calendar:startTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the start time. |
| `#calendar:endTime` | Similar to `#calendar:startDate`, allows changing the attribute which is being used to read the end time. |
<figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#startDate</code></td><td>The date the event starts, which will display it in the calendar. The format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus sign).</td></tr><tr><td><code>#endDate</code></td><td>Similar to <code>startDate</code>, mentions the end date if the event spans across multiple days. The date is inclusive, so the end day is also considered. The attribute can be missing for single-day events.</td></tr><tr><td><code>#startTime</code></td><td>The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is <code>HH:MM</code> (hours in 24-hour format and minutes).</td></tr><tr><td><code>#endTime</code></td><td>Similar to <code>startTime</code>, it mentions the time at which the event ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td></tr><tr><td><code>#color</code></td><td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or hex such as <code>#FF0000</code>). This will also change the color of the note in other places such as the note tree.</td></tr><tr><td><code>#calendar:color</code></td><td>Similar to <code>#color</code>, but applies the color only for the event in the calendar and not for other places such as the note tree.</td></tr><tr><td><code>#iconClass</code></td><td>If present, the icon of the note will be displayed to the left of the event title.</td></tr><tr><td><code>#calendar:title</code></td><td>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 <code>#</code> or <code>~</code> symbol). See <em>Use-cases</em> for more information.</td></tr><tr><td><code>#calendar:displayedAttributes</code></td><td>Allows displaying the value of one or more attributes in the calendar like this:&nbsp;&nbsp;&nbsp;&nbsp;<br><br><img src="9_Calendar View_image.png"> &nbsp;&nbsp;<br><br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;<br><br>It can also be used with relations, case in which it will display the title of the target note:&nbsp;&nbsp;&nbsp;<br><br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code></td></tr><tr><td><code>#calendar:startDate</code></td><td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>). The label name <strong>must not be</strong> prefixed with <code>#</code>. If the label is not defined for a note, the default will be used instead.</td></tr><tr><td><code>#calendar:endDate</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the end date.</td></tr><tr><td><code>#calendar:startTime</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the start time.</td></tr><tr><td><code>#calendar:endTime</code></td><td>Similar to <code>#calendar:startDate</code>, allows changing the attribute which is being used to read the end time.</td></tr></tbody></table></figure>
## How the calendar works
@@ -96,7 +79,7 @@ Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calend
* Clicking on the empty space on a date will automatically open that day's note or create it if it does not exist.
* Direct children of a day note will be displayed on the calendar despite not having a `dateNote` attribute. Children of the child notes will not be displayed.
![](8_Calendar%20View_image.png)
<img src="8_Calendar View_image.png" width="1217" height="724">
### Using a different attribute as event title
@@ -104,7 +87,7 @@ By default, events are displayed on the calendar by their note title. However, i
To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can 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.
<table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><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></td><td><img src="5_Calendar View_image.png"></td></tr></tbody></table>
<figure class="table" style="width:100%;"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><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></td><td><p>&nbsp;</p><figure class="image image-style-align-center"><img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445" height="124"></figure></td></tr></tbody></table></figure>
### Using a relation attribute as event title
@@ -112,12 +95,8 @@ Similarly to using an attribute, use `#calendar:title` and set it to `name` wher
Moreover, if there are more relations of the same name, they will be displayed as multiple events coming from the same note.
| | |
| --- | --- |
| `#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"` | ![](6_Calendar%20View_image.png) |
<figure class="table" style="width:100%;"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><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></td><td><img src="6_Calendar View_image.png" width="294" height="151"></td></tr></tbody></table></figure>
Note that it's even possible to have a `#calendar:title` on the target note (e.g. “John Smith”) which will try to render an attribute of it. Note that it's not possible to use a relation here as well for safety reasons (an accidental recursion  of attributes could cause the application to loop infinitely).
| | |
| --- | --- |
| `#calendar:title="shortName" #shortName="John S."` | ![](1_Calendar%20View_image.png) |
<figure class="table" style="width:100%;"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre></td><td><figure class="image image-style-align-center"><img style="aspect-ratio:296/150;" src="1_Calendar View_image.png" width="296" height="150"></figure></td></tr></tbody></table></figure>