1 files changed, 64 insertions, 4 deletions

diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index fa863e123..84fa25dba 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -1,4 +1,5 @@
 import { Calendar, EventClickArg, EventDropArg, EventSourceInput } from '@fullcalendar/core';
+import { EventResizeDoneArg } from '@fullcalendar/interaction';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import multiMonthPlugin from '@fullcalendar/multimonth';
@@ -17,6 +18,7 @@ import { ContextMenu } from '../../ContextMenu';
 import { DocumentView } from '../DocumentView';
 import { OpenWhere } from '../OpenWhere';
 import './CalendarBox.scss';
+import { DateField } from '../../../../fields/DateField';
 
 type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay';
 
@@ -66,6 +68,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 +77,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,7 +108,11 @@ export class CalendarBox extends CollectionSubView() {
 
     // TODO: Return a different color based on the event type
     eventToColor = (event: Doc): string => {
-        return 'red' + event;
+        const docType = StrCast(event.type);
+        if (docType === 'task') {
+            return '#20B2AA'; // teal for tasks
+        }
+        return 'red';
     };
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -123,9 +130,30 @@ export class CalendarBox extends CollectionSubView() {
         return false;
     };
 
-    handleEventDrop = (arg: EventDropArg) => {
+    handleEventDrop = (arg: EventDropArg | EventResizeDoneArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
-        doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
+        // doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
+        if (!doc || !arg.event.start) return;
+
+        // get the new start and end dates
+        const startDate = new Date(arg.event.start);
+        const endDate = new Date(arg.event.end ?? arg.event.start);
+
+        // update date range, time range, and all day status
+        doc.date_range = `${startDate.toISOString()}|${endDate.toISOString()}`;
+
+        const allDayStatus = arg.event.allDay ?? false;
+        if (doc.allDay !== allDayStatus) {
+            doc.allDay = allDayStatus;
+        }
+
+        if (doc.allDay) {
+            delete doc.startTime;
+            delete doc.endTime;
+        } else {
+            doc.startTime = new DateField(startDate);
+            doc.endTime = new DateField(endDate);
+        }
     };
 
     handleEventClick = (arg: EventClickArg) => {
@@ -171,7 +199,39 @@ export class CalendarBox extends CollectionSubView() {
                   events: this.calendarEvents,
                   eventClick: this.handleEventClick,
                   eventDrop: this.handleEventDrop,
+                  eventResize: 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();
                       });