feat(calendar_view): integrate fullcalendar

package-lock.json

@@ -12,6 +12,8 @@
         "@braintree/sanitize-url": "7.1.1",
         "@electron/remote": "2.1.2",
         "@excalidraw/excalidraw": "0.17.6",
+        "@fullcalendar/core": "6.1.15",
+        "@fullcalendar/daygrid": "6.1.15",
         "@highlightjs/cdn-assets": "11.11.1",
         "@joplin/turndown-plugin-gfm": "1.0.61",
         "@mermaid-js/layout-elk": "0.1.7",
@@ -2125,6 +2127,34 @@
         "react-dom": "^17.0.2 || ^18.2.0"
       }
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/core/node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
+      "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

package.json

@@ -62,6 +62,8 @@
     "@braintree/sanitize-url": "7.1.1",
     "@electron/remote": "2.1.2",
     "@excalidraw/excalidraw": "0.17.6",
+    "@fullcalendar/core": "6.1.15",
+    "@fullcalendar/daygrid": "6.1.15",
     "@highlightjs/cdn-assets": "11.11.1",
     "@joplin/turndown-plugin-gfm": "1.0.61",
     "@mermaid-js/layout-elk": "0.1.7",

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

@@ -1,4 +1,3 @@
-import type FNote from "../../entities/fnote.js";
 import ViewMode, { type ViewModeArgs } from "./view_mode.js";
 
 const TPL = `
@@ -11,22 +10,34 @@ const TPL = `
     }
     </style>
 
-    Hello world.
+    <div class="calendar-container">
+    </div>
 </div>
 `;
 
 export default class CalendarView extends ViewMode {
 
     private $root: JQuery<HTMLElement>;
+    private $calendarContainer: JQuery<HTMLElement>;
 
     constructor(args: ViewModeArgs) {
         super(args);
 
         this.$root = $(TPL);
+        this.$calendarContainer = this.$root.find(".calendar-container");
         args.$parent.append(this.$root);
     }
 
     async renderList(): Promise<JQuery<HTMLElement> | undefined> {
+        const { Calendar } = await import("@fullcalendar/core");
+        const dayGridPlugin = (await import("@fullcalendar/daygrid")).default;
+
+        const calendar = new Calendar(this.$calendarContainer[0], {
+            plugins: [ dayGridPlugin ],
+            initialView: "dayGridMonth"
+        });
+        calendar.render();
+
         return this.$root;
     }