fix(docs): update calendar view documentation

This commit is contained in:
Elian Doran 2025-03-15 19:44:15 +02:00
parent 00106580ca
commit 36fa0af706
No known key found for this signature in database
2 changed files with 271 additions and 249 deletions

View File

@ -52,18 +52,22 @@ For each note of the calendar, the following attributes can be used:
| `#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. | | `#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. | | `#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, either a label (e.g. `#assignee`) or a relation (e.g. `~for`). See _Advanced 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, either a label (e.g. `#assignee`) or a relation (e.g. `~for`). See _Advanced use-cases_ for more information. |
| `#calendar:promotedAttributes` | Allows displaying the value of one or more promoted attributes in the calendar like this: ![](13_Calendar%20View_image.png) <br> <br>`<br>#label:weight="promoted,number,single,precision=1"<br>#label:mood="promoted,alias=Mood,single,text"<br>#calendar:promotedAttributes="label:weight,label:mood" <br>` <br> <br>It can also be used with relations, case in which it will display the title of the target note: <br> <br>`<br>#relation:assignee="promoted,alias=Assignee,single,text"<br>#calendar:promotedAttributes="relation:assignee" <br>~assignee=@My assignee<br>` | | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this: <br><br>![](13_Calendar%20View_image.png)<br><br>```<br>#weight="70"<br>#Mood="Good"<br>#calendar:displayedAttributes="weight,Mood"<br>```<br><br>It can also be used with relations, case in which it will display the title of the target note:<br><br>```<br>~assignee=@My assignee<br>#calendar:displayedAttributes="assignee"<br>``` |
| `#calendar:startDate` | Allows using a different label to represent the start date, other than `#startDate` (e.g. `#expiryDate`). The label name must be prefixed with `#`. If the label is not defined for a note, the default will be used instead. | | `#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` | Allows using a different label to represent the start date, other than `#endDate`. The label name must be prefixed with `#`. If the label is not defined for a note, the default will be used instead. | | `#calendar:endDate` | Allows using a different label to represent the start date, other than `endDate`. The label name **must not be** prefixed with `#`. If the label is not defined for a note, the default will be used instead. |
## How the calendar works ## How the calendar works
![](17_Calendar%20View_image.png)The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added. ![](17_Calendar%20View_image.png)
The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added.
If editing the start date and end date from the note itself is desirable, the following attributes can be added to the book note: If editing the start date and end date from the note itself is desirable, the following attributes can be added to the book note:
``` ```
#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date" #label:endDate(inheritable)="promoted,alias=End Date,single,date" #hidePromotedAttributes #viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes
``` ```
This will result in: This will result in:

View File

@ -21,12 +21,13 @@
<p>Unlike other Book view types, the Calendar view also allows some kind <p>Unlike other Book view types, the Calendar view also allows some kind
of interaction, such as moving events around as well as creating new ones.</p> of interaction, such as moving events around as well as creating new 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>
@ -49,6 +50,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<h2>Creating a new event/note</h2> <h2>Creating a new event/note</h2>
<ul> <ul>
<li>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
@ -81,6 +83,7 @@
</ul> </ul>
<h2>Configuring the calendar</h2> <h2>Configuring the calendar</h2>
<p>The following attributes can be added to the book type:</p> <p>The following attributes can be added to the book type:</p>
<figure class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -109,10 +112,13 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<p>In addition, the first day of the week can be either Sunday or Monday <p>In addition, the first day of the week can be either Sunday or Monday
and can be adjusted from the application settings.</p> and can be adjusted from the application settings.</p>
<h2>Configuring the calendar events</h2> <h2>Configuring the calendar events</h2>
<p>For each note of the calendar, the following attributes can be used:</p> <p>For each note of the calendar, the following attributes can be used:</p>
<figure
class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -162,42 +168,48 @@
(e.g. <code>~for</code>). See <em>Advanced use-cases</em> for more information.</td> (e.g. <code>~for</code>). See <em>Advanced use-cases</em> for more information.</td>
</tr> </tr>
<tr> <tr>
<td><code>#calendar:promotedAttributes</code> <td><code>#calendar:displayedAttributes</code>
</td> </td>
<td>Allows displaying the value of one or more promoted attributes in the <td>
calendar like this: <p>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;</p>
<p>
<img src="13_Calendar View_image.png" alt=""> <img src="13_Calendar View_image.png" alt="">
<br> </p><pre><code class="language-text-x-trilium-auto">#weight="70"
<br><code>&lt;br&gt;#label:weight="promoted,number,single,precision=1"&lt;br&gt;#label:mood="promoted,alias=Mood,single,text"&lt;br&gt;#calendar:promotedAttributes="label:weight,label:mood" &lt;br&gt;</code> #Mood="Good"
<br> #calendar:displayedAttributes="weight,Mood"</code></pre>
<br>It can also be used with relations, case in which it will display the <p>It can also be used with relations, case in which it will display the
title of the target note: title of the target note:</p><pre><code class="language-text-x-trilium-auto">~assignee=@My assignee
<br> #calendar:displayedAttributes="assignee"</code></pre>
<br><code>&lt;br&gt;#relation:assignee="promoted,alias=Assignee,single,text"&lt;br&gt;#calendar:promotedAttributes="relation:assignee" &lt;br&gt;~assignee=@My assignee&lt;br&gt;</code>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><code>#calendar:startDate</code> <td><code>#calendar:startDate</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>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
The label name must be prefixed with <code>#</code>. If the label is not The label name <strong>must not be</strong> prefixed with <code>#</code>.
defined for a note, the default will be used instead.</td> If the label is not defined for a note, the default will be used instead.</td>
</tr> </tr>
<tr> <tr>
<td><code>#calendar:endDate</code> <td><code>#calendar:endDate</code>
</td> </td>
<td>Allows using a different label to represent the start date, other than <code>#endDate</code>. <td>Allows using a different label to represent the start date, other than <code>endDate</code>.
The label name must be prefixed with <code>#</code>. If the label is not The label name <strong>must not be</strong> prefixed with <code>#</code>.
defined for a note, the default will be used instead.</td> If the label is not defined for a note, the default will be used instead.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<h2>How the calendar works</h2> <h2>How the calendar works</h2>
<p> <p>
<img src="17_Calendar View_image.png" alt="">The calendar displays all the child notes of the book that have a <code>#startDate</code>. <img src="17_Calendar View_image.png" alt="">
</p>
<p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
An <code>#endDate</code> can optionally be added.</p> An <code>#endDate</code> can optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable, <p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the book 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" #hidePromotedAttributes </code></pre> the following attributes can be added to the book 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"
#hidePromotedAttributes </code></pre>
<p>This will result in:</p> <p>This will result in:</p>
<p> <p>
<img src="14_Calendar View_image.png" alt=""> <img src="14_Calendar View_image.png" alt="">
@ -236,11 +248,12 @@
be any label. The attribute can also come through inheritance such as a be any label. The attribute can also come through inheritance such as a
template attribute. If the note does not have the requested label, the template attribute. If the note does not have the requested label, the
title of the note will be used instead.</p> title of the note will be used instead.</p>
<figure class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th> <th>&nbsp;</th>
<th></th> <th>&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -254,17 +267,19 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<h3>Using a relation attribute as event title</h3> <h3>Using a relation attribute as event title</h3>
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set <p>Similarly to using an attribute, use <code>#calendar:title</code> and set
it to <code>~name</code> where <code>name</code> is the name of the relation it to <code>~name</code> where <code>name</code> is the name of the relation
to use.</p> to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed <p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p> as multiple events coming from the same note.</p>
<figure class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th> <th>&nbsp;</th>
<th></th> <th>&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -278,16 +293,18 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<p>Note that it's even possible to have a <code>#calendar:title</code> on the <p>Note that it's even possible to have a <code>#calendar:title</code> on the
target note (e.g. “John Smith”) which will try to render an attribute of 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 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 reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p> to loop infinitely).</p>
<figure class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th> <th>&nbsp;</th>
<th></th> <th>&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -301,6 +318,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
</div> </div>
</div> </div>
</body> </body>