added task nodes calendar intergation, and ability to complete tasks directly via calendar view

2 files changed, 60 insertions, 1 deletions

diff --git a/src/client/views/nodes/calendarBox/CalendarBox.scss b/src/client/views/nodes/calendarBox/CalendarBox.scss
index f8ac4b2d1..f5d3613e3 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.scss
+++ b/src/client/views/nodes/calendarBox/CalendarBox.scss
@@ -23,3 +23,22 @@
         }
     }
 }
+
+// AARAV ADD
+
+/* Existing styles */
+.fc-event.mother {
+    font-weight: 500;
+    border-radius: 4px;
+    padding: 2px 4px;
+    border-width: 2px;
+  }
+  
+  /* New styles for completed tasks */
+  .fc-event.completed-task {
+    opacity: 1;
+    filter: grayscale(70%) brightness(90%);
+    text-decoration: line-through;
+    color: #ffffff;
+  }
+  
\ No newline at end of file
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index 6f1f58a4c..cc8614f66 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -66,6 +66,7 @@ export class CalendarBox extends CollectionSubView() {
     @computed get calendarEvents(): EventSourceInput | undefined {
         return this.childDocs.map(doc => {
             const { start, end } = dateRangeStrToDates(StrCast(doc.date_range));
+            const isCompleted = BoolCast(doc.completed); // AARAV ADD
             return {
                 title: StrCast(doc.title),
                 start,
@@ -74,7 +75,7 @@ export class CalendarBox extends CollectionSubView() {
                 startEditable: true,
                 endEditable: true,
                 allDay: BoolCast(doc.allDay),
-                classNames: ['mother'], // will determine the style
+                classNames: ['mother', isCompleted ? 'completed-task' : ''], // will determine the style
                 editable: true, // subject to change in the future
                 backgroundColor: this.eventToColor(doc),
                 borderColor: this.eventToColor(doc),
@@ -105,6 +106,10 @@ export class CalendarBox extends CollectionSubView() {
 
     // TODO: Return a different color based on the event type
     eventToColor = (event: Doc): string => {
+        const docType = StrCast(event.type);
+        if (docType === 'task') {
+            return '#20B2AA'; // teal for tasks
+        }
         return 'red';
     };
 
@@ -171,6 +176,41 @@ export class CalendarBox extends CollectionSubView() {
                   eventClick: this.handleEventClick,
                   eventDrop: this.handleEventDrop,
                   eventDidMount: arg => {
+
+                    const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
+                    if (!doc) return;
+
+                    if (doc.type === 'task') {
+                        const checkButton = document.createElement('button');
+                        checkButton.innerText = doc.completed ? '✅' : '⬜';
+                        checkButton.style.position = 'absolute';
+                        checkButton.style.right = '5px';
+                        checkButton.style.top = '50%';
+                        checkButton.style.transform = 'translateY(-50%)';
+                        checkButton.style.background = 'transparent';
+                        checkButton.style.border = 'none';
+                        checkButton.style.cursor = 'pointer';
+                        checkButton.style.fontSize = '18px';
+                        checkButton.style.zIndex = '1000';
+                        checkButton.style.padding = '0';
+                        checkButton.style.margin = '0';
+
+                        checkButton.onclick = ev => {
+                            ev.stopPropagation();
+                            doc.completed = !doc.completed;
+                            this._calendar?.refetchEvents();
+                        };
+
+                        // Make sure the parent box is positioned relative
+                        arg.el.style.position = 'relative';
+                        arg.el.appendChild(checkButton);
+                    }
+
+                    // (keep your other pointerup/contextmenu handlers here)
+
+
+
+
                       arg.el.addEventListener('pointerdown', ev => {
                           ev.button && ev.stopPropagation();
                       });