implement drag&drop in calendar

src/View/ChatPages/calendarPage.tsx

@@ -2,6 +2,7 @@ import "./calendarPage.css";
 
 import * as React from "bloatless-react";
 
+import CalendarModel from "../../Model/Files/calendarModel";
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
@@ -14,13 +15,20 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
   const mainContent = React.createProxyState(
     [calendarPageViewModel.monthGrid],
     () => {
-      if (calendarPageViewModel.monthGrid.value == undefined) {
+      const monthGrid = calendarPageViewModel.monthGrid.value;
+
+      if (monthGrid == undefined) {
         return <div></div>;
       } else {
-        return MonthGrid(
-          calendarPageViewModel.monthGrid.value,
-          calendarPageViewModel.selectedDate
-        );
+        function drop(date: string) {
+          calendarPageViewModel.handleDrop(
+            monthGrid!.year.toString(),
+            monthGrid!.month.toString(),
+            date
+          );
+        }
+
+        return MonthGrid(monthGrid, calendarPageViewModel.selectedDate, drop);
       }
     }
   );

src/View/Components/monthGrid.tsx

@@ -4,10 +4,12 @@ import * as React from "bloatless-react";
 import { MonthGrid } from "../../Model/Files/calendarModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
+import { allowDrop } from "../utility";
 
 export function MonthGrid<T>(
   monthGrid: MonthGrid<React.MapState<T>>,
-  selectedDate: React.State<number>
+  selectedDate: React.State<number>,
+  handleDrop: (date: string) => void
 ) {
   const dayLabels: HTMLElement[] = [];
   let currentWeekday = monthGrid.firstDayOfWeek;
@@ -61,12 +63,18 @@ export function MonthGrid<T>(
             selectedDate.value = parseInt(date);
           }
 
+          function drop() {
+            handleDrop(date);
+          }
+
           return (
             <button
               class="tile"
               on:click={select}
               toggle:selected={isSelected}
               toggle:today={isToday}
+              on:dragover={allowDrop}
+              on:drop={drop}
             >
               <div>
                 <b>{date}</b>