Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-30 11:42:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): update calendar view

Browse Source
This commit is contained in:
Elian Doran 2025-03-16 21:31:58 +02:00
parent 2544294811
commit e34817d89f
No known key found for this signature in database
2 changed files with 310 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/User Guide/User Guide/Note Types/Book/Calendar View.md
View File

@ -32,11 +32,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: The following attributes can be added to the book type:
| Name | Description | <div class="joplin-table-wrapper"><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></div>
| --- | --- |
| `#calendar:hideWeekends` | When present (regardless of value), it will hide Saturday and Sundays from the calendar. |
| `#calendar:weekNumbers` | When present (regardless of value), it will show the number of the week on the calendar. |
| `~child:template` | Defines the template for newly created notes in the calendar (via dragging or clicking). |
In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings. In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
@ -48,13 +44,17 @@ For each note of the calendar, the following attributes can be used:
| --- | --- | | --- | --- |
| `#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). | | `#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. | | `#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. | | `#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. | | `#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:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:  <br> <br>![](11_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:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:   <br> <br>![](11_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: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 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. |
## How the calendar works ## How the calendar works

93
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Book/Calendar View.html generated
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,7 +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
@ -82,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>
@ -102,6 +104,23 @@
<td>When present (regardless of value), it will show the number of the week <td>When present (regardless of value), it will show the number of the week
on the calendar.</td> on the calendar.</td>
</tr> </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> <tr>
<td><code>~child:template</code> <td><code>~child:template</code>
</td> </td>
@ -110,10 +129,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>
@ -136,6 +158,19 @@
across multiple days. The date is inclusive, so the end day is also considered. across multiple days. The date is inclusive, so the end day is also considered.
The attribute can be missing for single-day events.</td> The attribute can be missing for single-day events.</td>
</tr> </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> <tr>
<td><code>#color</code> <td><code>#color</code>
</td> </td>
@ -166,17 +201,17 @@
<td><code>#calendar:displayedAttributes</code> <td><code>#calendar:displayedAttributes</code>
</td> </td>
<td>Allows displaying the value of one or more attributes in the calendar <td>Allows displaying the value of one or more attributes in the calendar
like this:  like this:&nbsp;&nbsp;
<br> <br>
<br> <br>
<img src="11_Calendar View_image.png"> <img src="11_Calendar View_image.png">&nbsp;
<br> <br>
<br><code>&lt;br&gt;#weight="70"&lt;br&gt;#Mood="Good"&lt;br&gt;#calendar:displayedAttributes="weight,Mood"&lt;br&gt;</code> <br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>
<br> <br>
<br>It can also be used with relations, case in which it will display the <br>It can also be used with relations, case in which it will display the
title of the target note: title of the target note:&nbsp;
<br> <br>
<br><code>&lt;br&gt;~assignee=@My assignee&lt;br&gt;#calendar:displayedAttributes="assignee"&lt;br&gt;</code> <br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -189,13 +224,24 @@
<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>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>
<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> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<h2>How the calendar works</h2> <h2>How the calendar works</h2>
<p> <p>
<img src="14_Calendar View_image.png"> <img src="14_Calendar View_image.png">
@ -244,11 +290,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>
@ -262,18 +309,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>
@ -287,16 +335,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>
@ -310,6 +360,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
</div> </div>
</div> </div>
</body> </body>