feat(view/calendar): add help

src/public/app/doc_notes/en/User Guide/!!!meta.json

@@ -11,7 +11,7 @@
 			"title": "User Guide",
 			"notePosition": 20,
 			"prefix": null,
-			"isExpanded": true,
+			"isExpanded": false,
 			"type": "text",
 			"mime": "text/html",
 			"attributes": [
@@ -166,7 +166,7 @@
 					"title": "Features",
 					"notePosition": 40,
 					"prefix": null,
-					"isExpanded": false,
+					"isExpanded": true,
 					"type": "text",
 					"mime": "text/html",
 					"attributes": [],
@@ -314,7 +314,7 @@
 					"title": "Note Types",
 					"notePosition": 70,
 					"prefix": null,
-					"isExpanded": false,
+					"isExpanded": true,
 					"type": "text",
 					"mime": "text/html",
 					"attributes": [],
@@ -536,6 +536,208 @@
 									"dataFileName": "19_Geo map_image.png"
 								}
 							]
+						},
+						{
+							"isClone": false,
+							"noteId": "pSDzQIgLGswQ",
+							"notePath": [
+								"OkOZllzB3fqN",
+								"wmegHv51MJMd",
+								"pSDzQIgLGswQ"
+							],
+							"title": "Book",
+							"notePosition": 30,
+							"prefix": null,
+							"isExpanded": true,
+							"type": "text",
+							"mime": "text/html",
+							"attributes": [
+								{
+									"type": "label",
+									"name": "iconClass",
+									"value": "bx bx-book-alt",
+									"isInheritable": false,
+									"position": 10
+								}
+							],
+							"format": "html",
+							"attachments": [],
+							"dirFileName": "Book",
+							"children": [
+								{
+									"isClone": false,
+									"noteId": "fDGg7QcJg3Xm",
+									"notePath": [
+										"OkOZllzB3fqN",
+										"wmegHv51MJMd",
+										"pSDzQIgLGswQ",
+										"fDGg7QcJg3Xm"
+									],
+									"title": "Calendar View",
+									"notePosition": 10,
+									"prefix": null,
+									"isExpanded": false,
+									"type": "text",
+									"mime": "text/html",
+									"attributes": [
+										{
+											"type": "label",
+											"name": "iconClass",
+											"value": "bx bx-calendar",
+											"isInheritable": false,
+											"position": 10
+										}
+									],
+									"format": "html",
+									"dataFileName": "Calendar View.html",
+									"attachments": [
+										{
+											"attachmentId": "j1NIQJvjsFrc",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "Calendar View_image.png"
+										},
+										{
+											"attachmentId": "9FxGltAPWr9V",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "1_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "8kfaJPGjJ1t5",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "2_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "GaH4K6lKfcQe",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "3_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "xr4c0Mdf7gPm",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "4_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "K8NQktF9sCss",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "5_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "fFaq1mWTFlJA",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "6_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "2CExLYphNtCd",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "7_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "UaXBPb7fINm4",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "8_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "TIzqtnGIPlxu",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "9_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "p7eRe4TFFdIt",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "10_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "bnKESYv4Toa1",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "11_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "MwECr6EjQjEE",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "12_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "0J8MfQPq7E1H",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "13_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "0yGXmgB3yfGg",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "14_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "XBOyB2RH28OS",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "15_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "BsiAqW51VJOz",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "16_Calendar View_image.png"
+										},
+										{
+											"attachmentId": "RTFdV19BHn28",
+											"title": "image.png",
+											"role": "image",
+											"mime": "image/png",
+											"position": 10,
+											"dataFileName": "17_Calendar View_image.png"
+										}
+									]
+								}
+							]
 						}
 					]
 				},
@@ -624,7 +826,7 @@
 							"title": "Examples",
 							"notePosition": 10,
 							"prefix": null,
-							"isExpanded": true,
+							"isExpanded": false,
 							"type": "text",
 							"mime": "text/html",
 							"attributes": [],
@@ -895,7 +1097,7 @@
 									"title": "ETAPI",
 									"notePosition": 10,
 									"prefix": null,
-									"isExpanded": true,
+									"isExpanded": false,
 									"type": "text",
 									"mime": "text/html",
 									"attributes": [],
@@ -945,7 +1147,7 @@
 									"title": "Internal API",
 									"notePosition": 20,
 									"prefix": null,
-									"isExpanded": true,
+									"isExpanded": false,
 									"type": "text",
 									"mime": "text/html",
 									"attributes": [],

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Book/Calendar View.html

@@ -0,0 +1,192 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Calendar View</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Calendar View</h1>
+
+      <div class="ck-content">
+        <figure class="image">
+          <img style="aspect-ratio:767/606;" src="6_Calendar View_image.png" width="767"
+          height="606">
+        </figure>
+        <p>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.</p>
+        <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>
+        <h2>Creating a calendar</h2>
+        <figure class="table" style="width:100%;">
+          <table class="ck-table-resized">
+            <colgroup>
+              <col style="width:3.67%;">
+                <col style="width:61.57%;">
+                  <col style="width:34.76%;">
+            </colgroup>
+            <tbody>
+              <tr>
+                <th>1</th>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:545/299;" src="Calendar View_image.png" width="545"
+                    height="299">
+                  </figure>
+                  <p>&nbsp;</p>
+                </td>
+                <td style="vertical-align:top;">
+                  <p>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 <i>Book</i>.</p>
+                  <p>&nbsp;</p>
+                </td>
+              </tr>
+              <tr>
+                <th>2</th>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:314/233;" src="1_Calendar View_image.png" width="314"
+                    height="233">
+                  </figure>
+                </td>
+                <td style="vertical-align:top;">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>
+        <h2>Creating a new event/note</h2>
+        <ul>
+          <li>Clicking on a day will create a new child note and assign it to that particular
+            day.
+            <ul>
+              <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>
+            </ul>
+          </li>
+          <li>It's possible to drag across multiple days to set both the start and end
+            date of a particular note.
+            <br>
+            <img src="4_Calendar View_image.png" width="425" height="91">
+          </li>
+        </ul>
+        <h2>Interacting with events</h2>
+        <ul>
+          <li>Hovering the mouse over an event will display information about the note.
+            <br>
+            <img src="5_Calendar View_image.png" width="323" height="160">
+          </li>
+          <li>Left clicking the event will go to that note. Middle clicking will open
+            the note in a new tab and right click will offer more options including
+            opening the note in a new split or window.</li>
+          <li>Drag and drop an event on the calendar to move it to another day.</li>
+          <li>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>
+        </ul>
+        <h2>Configuring the calendar</h2>
+        <ul>
+          <li>The first day of the week can be either Sunday or Monday and can be adjusted
+            from the application settings.</li>
+        </ul>
+        <h2>How the calendar works</h2>
+        <p>
+          <img class="image-style-align-left" src="7_Calendar View_image.png" width="329"
+          height="116">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>
+        <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>
+        <p>This will result in:</p>
+        <p>
+          <img src="9_Calendar View_image.png" width="264" height="164">
+        </p>
+        <h2>Advanced use-cases</h2>
+        <h3>Using a different attribute as event title</h3>
+        <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
+          instead.</p>
+        <p>To do so, assign <code>#calendar:title</code> to the child note (not the
+          calendar/book note), with the value being <code>#name</code> where <code>name</code> can
+          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
+          title of the note will be used instead.</p>
+        <figure class="table">
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:631/115;" src="10_Calendar View_image.png" width="631"
+                    height="115">
+                  </figure>
+                </td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:445/124;" src="11_Calendar View_image.png" width="445"
+                    height="124">
+                  </figure>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </figure>
+        <h3>Using a relation attribute as event title</h3>
+        <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
+          to use.</p>
+        <p>Moreover, if there are more relations of the same name, they will be displayed
+          as multiple events coming from the same note.</p>
+        <figure class="table">
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:666/118;" src="15_Calendar View_image.png" width="666"
+                    height="118">
+                  </figure>
+                </td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:294/151;" src="14_Calendar View_image.png" width="294"
+                    height="151">
+                  </figure>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </figure>
+        <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
+          it. Note that it's not possible to use a relation here as well for safety
+          reasons (an accidental recursion &nbsp;of attributes could cause the application
+          to loop infinitely).</p>
+        <figure class="table">
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:364/121;" src="16_Calendar View_image.png" width="364"
+                    height="121">
+                  </figure>
+                </td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:296/150;" src="17_Calendar View_image.png" width="296"
+                    height="150">
+                  </figure>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </figure>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/navigation.html

@@ -29,6 +29,12 @@
               </li>
               <li><a href="User%20Guide/Note%20Types/Geo%20map.html" target="detail">Geo map</a>
               </li>
+              <li>Book
+                <ul>
+                  <li><a href="User%20Guide/Note%20Types/Book/Calendar%20View.html" target="detail">Calendar View</a>
+                  </li>
+                </ul>
+              </li>
             </ul>
           </li>
           <li>Shared notes

src/public/app/widgets/buttons/global_menu.ts

@@ -365,6 +365,7 @@ export default class GlobalMenuWidget extends BasicWidget {
 
         this.$zoomState = this.$widget.find(".zoom-state");
         this.$toggleZenMode = this.$widget.find('[data-trigger-command="toggleZenMode"');
+        this.$toggleZenMode.toggle(!utils.isMobile());
         this.$widget.on("show.bs.dropdown", () => this.#onShown());
         if (this.tooltip) {
             this.$widget.on("hide.bs.dropdown", () => this.tooltip.enable());

src/public/app/widgets/view_widgets/calendar_view.ts

@@ -155,16 +155,10 @@ export default class CalendarView extends ViewMode {
 
     async #onEventMoved(e: EventChangeArg) {
         const startDate = CalendarView.#formatDateToLocalISO(e.event.start);
+        // Fullcalendar end date is exclusive, not inclusive but we store it the other way around.
         let endDate = CalendarView.#formatDateToLocalISO(CalendarView.#offsetDate(e.event.end, -1));
         const noteId = e.event.extendedProps.noteId;
 
-        // Fullcalendar end date is exclusive, not inclusive but we store it the other way around.
-        if (endDate) {
-            const endDateParsed = new Date(endDate);
-            endDateParsed.setDate(endDateParsed.getDate() - 1);
-            endDate = CalendarView.#formatDateToLocalISO(endDateParsed);
-        }
-
         // Don't store the end date if it's empty.
         if (endDate === startDate) {
             endDate = undefined;