feat(collections/calendar): context menu option to delete event

apps/client/src/translations/en/translation.json

@@ -2037,6 +2037,9 @@
     "start-presentation": "Start presentation",
     "slide-overview": "Toggle an overview of the slides"
   },
+  "calendar_view": {
+    "delete_note": "Delete note..."
+  },
   "command_palette": {
     "tree-action-name": "Tree: {{name}}",
     "export_note_title": "Export Note",

apps/client/src/widgets/collections/calendar/context_menu.ts

@@ -0,0 +1,28 @@
+import FNote from "../../../entities/fnote";
+import contextMenu, { ContextMenuEvent } from "../../../menus/context_menu";
+import link_context_menu from "../../../menus/link_context_menu";
+import branches from "../../../services/branches";
+import { t } from "../../../services/i18n";
+
+export function openCalendarContextMenu(e: ContextMenuEvent, noteId: string, parentNote: FNote) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    contextMenu.show({
+        x: e.pageX,
+        y: e.pageY,
+        items: [
+            ...link_context_menu.getItems(),
+            { kind: "separator" },
+            {
+                title: t("calendar_view.delete_note"),
+                uiIcon: "bx bx-trash",
+                handler: async () => {
+                    const branchId = parentNote.childToBranch[noteId];
+                    await branches.deleteNotes([ branchId ], false, false);
+                }
+            }
+        ],
+        selectMenuItemHandler: ({ command }) =>  link_context_menu.handleLinkContextMenuItem(command, noteId),
+    })
+}

apps/client/src/widgets/collections/calendar/index.tsx

@@ -20,6 +20,7 @@ import Button, { ButtonGroup } from "../../react/Button";
 import ActionButton from "../../react/ActionButton";
 import { RefObject } from "preact";
 import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
+import { openCalendarContextMenu } from "./context_menu";
 
 interface CalendarViewData {
 
@@ -106,7 +107,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     const plugins = usePlugins(isEditable, isCalendarRoot);
     const locale = useLocale();
 
-    const { eventDidMount } = useEventDisplayCustomization();
+    const { eventDidMount } = useEventDisplayCustomization(note);
     const editingProps = useEditing(note, isEditable, isCalendarRoot);
 
     // React to changes.
@@ -253,7 +254,7 @@ function useEditing(note: FNote, isEditable: boolean, isCalendarRoot: boolean) {
     };
 }
 
-function useEventDisplayCustomization() {
+function useEventDisplayCustomization(parentNote: FNote) {
     const eventDidMount = useCallback((e: EventMountArg) => {
         const { iconClass, promotedAttributes } = e.event.extendedProps;
 
@@ -302,6 +303,11 @@ function useEventDisplayCustomization() {
             }
             $(mainContainer ?? e.el).append($(promotedAttributesHtml));
         }
+
+        e.el.addEventListener("contextmenu", (contextMenuEvent) => {
+            const noteId = e.event.extendedProps.noteId;
+            openCalendarContextMenu(contextMenuEvent, noteId, parentNote);
+        });
     }, []);
     return { eventDidMount };
 }