feat(view/calendar): render a text in calendar view

src/public/app/services/note_list_renderer.ts

@@ -1,16 +1,43 @@
 import type FNote from "../entities/fnote.js";
+import CalendarView from "../widgets/view_widgets/calendar_view.js";
 import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
 import type ViewMode from "../widgets/view_widgets/view_mode.js";
 
 export default class NoteListRenderer {
 
-    private viewMode: ViewMode;
+    private viewType: string;
+    private viewMode: ViewMode | null;
 
     constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
-        this.viewMode = new ListOrGridView($parent, parentNote, noteIds, showNotePath);
+        console.log("Parent note is ", parentNote);
+        this.viewType = this.#getViewType(parentNote);
+        console.log("View type is ", this.viewType);
+
+        if (this.viewType === "list" || this.viewType === "grid") {
+            this.viewMode = new ListOrGridView(this.viewType, $parent, parentNote, noteIds, showNotePath);
+        } else if (this.viewType === "calendar") {
+            this.viewMode = new CalendarView(this.viewType, $parent, parentNote, noteIds, showNotePath);
+        } else {
+            this.viewMode = null;
+        }
+    }
+
+    #getViewType(parentNote: FNote): string {
+        const viewType = parentNote.getLabelValue("viewType");
+
+        if (!["list", "grid", "calendar"].includes(viewType || "")) {
+            // when not explicitly set, decide based on the note type
+            return parentNote.type === "search" ? "list" : "grid";
+        } else {
+            return viewType as string;
+        }
     }
 
     async renderList() {
+        if (!this.viewMode) {
+            return null;
+        }
+
         return await this.viewMode.renderList();
     }
 

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

@@ -0,0 +1,33 @@
+import type FNote from "../../entities/fnote.js";
+import ViewMode from "./view_mode.js";
+
+const TPL = `
+<div class="calendar-view">
+    <style>
+    .calendar-view {
+        overflow: hidden;
+        position: relative;
+        height: 100%;
+    }
+    </style>
+
+    Hello world.
+</div>
+`;
+
+export default class CalendarView extends ViewMode {
+
+    private $root: JQuery<HTMLElement>;
+
+    constructor(viewType: string, $parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
+        super($parent, parentNote, noteIds, showNotePath);
+
+        this.$root = $(TPL);
+        $parent.append(this.$root);
+    }
+
+    async renderList(): Promise<JQuery<HTMLElement> | undefined> {
+        return this.$root;
+    }
+
+}

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

@@ -172,12 +172,10 @@ class ListOrGridView extends ViewMode {
     /*
      * We're using noteIds so that it's not necessary to load all notes at once when paging
      */
-    constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
+    constructor(viewType: string, $parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
         super($parent, parentNote, noteIds, showNotePath);
         this.$noteList = $(TPL);
-
+        this.viewType = viewType;
-        // note list must be added to the DOM immediately, otherwise some functionality scripting (canvas) won't work
-        $parent.empty();
 
         this.parentNote = parentNote;
         const includedNoteIds = this.getIncludedNoteIds();
@@ -197,13 +195,6 @@ class ListOrGridView extends ViewMode {
             this.pageSize = 20;
         }
 
-        this.viewType = parentNote.getLabelValue("viewType");
-
-        if (!["list", "grid"].includes(this.viewType || "")) {
-            // when not explicitly set, decide based on the note type
-            this.viewType = parentNote.type === "search" ? "list" : "grid";
-        }
-
         this.$noteList.addClass(`${this.viewType}-view`);
 
         this.showNotePath = showNotePath;

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

@@ -3,7 +3,8 @@ import type FNote from "../../entities/fnote.js";
 export default abstract class ViewMode {
 
     constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
-
+        // note list must be added to the DOM immediately, otherwise some functionality scripting (canvas) won't work
+        $parent.empty();
     }
 
     abstract renderList(): Promise<JQuery<HTMLElement> | undefined>;