[#48] added drag and drop and resize changes to events

__test__/components/MiniCalendarColor.test.tsx

@@ -32,6 +32,7 @@ describe("MiniCalendar", () => {
             color: "#FF0000",
             events: {
               event1: {
+                calId: "667037022b752d0026472254/cal1",
                 id: "event1",
                 title: "Test Event",
                 start: day.toISOString(),
@@ -140,6 +141,7 @@ describe("Found Bugs", () => {
             color: "#FF0000",
             events: {
               event1: {
+                calId: "667037022b752d0026472254/cal1",
                 id: "event1",
                 title: "Test Event",
                 start: day.toISOString(),

src/components/Calendar/Calendar.css

@@ -27,16 +27,11 @@ main {
   position: relative;
 }
 
-.fc-timegrid-slot::after {
+.fc .fc-timegrid-slot {
-  content: "";
+  height: 30px !important;
-  position: absolute;
+  min-height: 30px !important;
-  top: 50%;
-  left: 0;
-  right: 0;
-  border-top: 1px dotted #ccc;
-  pointer-events: none;
-  z-index: 1;
 }
+
 .fc .fc-timegrid-slot-label {
   display: flex;
   align-items: flex-start;

src/components/Calendar/Calendar.tsx

@@ -12,11 +12,15 @@ import EventPopover from "../../features/Events/EventModal";
 import CalendarPopover from "../../features/Calendars/CalendarModal";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import CalendarSelection from "./CalendarSelection";
-import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
+import {
+  getCalendarDetailAsync,
+  putEventAsync,
+} from "../../features/Calendars/CalendarSlice";
 import ImportAlert from "../../features/Events/ImportAlert";
 import {
   formatDateToYYYYMMDDTHHMMSS,
   getCalendarRange,
+  getDeltaInMilliseconds,
 } from "../../utils/dateUtils";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { push } from "redux-first-history";
@@ -129,6 +133,11 @@ export default function CalendarApp() {
       new Date(selectedMiniDate.getFullYear(), selectedMiniDate.getMonth() + 1)
     );
   };
+
+  if (process.env.NODE_ENV === "test") {
+    (window as any).__calendarRef = calendarRef;
+  }
+
   return (
     <main>
       <div className="sidebar">
@@ -233,6 +242,7 @@ export default function CalendarApp() {
           initialView="timeGridWeek"
           editable={true}
           selectable={true}
+          timeZone="local"
           height={"100%"}
           select={handleDateSelect}
           nowIndicator
@@ -240,10 +250,16 @@ export default function CalendarApp() {
             timeGridWeek: { titleFormat: { month: "long", year: "numeric" } },
           }}
           dayMaxEvents={true}
-          events={filteredEvents}
+          events={filteredEvents.map((e) => {
+            if (e.calId.split("/")[0] === userId) {
+              return { ...e, editable: true };
+            }
+            return { ...e, editable: false };
+          })}
           weekNumbers
           weekNumberFormat={{ week: "long" }}
-          slotDuration={"01:00:00"}
+          slotDuration={"00:30:00"}
+          slotLabelInterval={"01:00:00"}
           scrollTime={"08:00:00"}
           unselectAuto={false}
           allDayText=""
@@ -294,6 +310,57 @@ export default function CalendarApp() {
               setEventDisplayedCalId(info.event.extendedProps.calId);
             }
           }}
+          eventDrop={(arg) => {
+            const event =
+              calendars[arg.event._def.extendedProps.calId].events[
+                arg.event._def.extendedProps.uid
+              ];
+            const totalDeltaMs = getDeltaInMilliseconds(arg.delta);
+
+            const originalStart = new Date(event.start);
+            const computedNewStart = new Date(
+              originalStart.getTime() + totalDeltaMs
+            );
+            const originalEnd = new Date(event.end ?? "");
+            const computedNewEnd = new Date(
+              originalEnd.getTime() + totalDeltaMs
+            );
+            const newEvent = {
+              ...event,
+              start: computedNewStart,
+              end: computedNewEnd,
+            } as CalendarEvent;
+            console.log(newEvent);
+            console.log(arg);
+            dispatch(
+              putEventAsync({ cal: calendars[newEvent.calId], newEvent })
+            );
+          }}
+          eventResize={(arg) => {
+            const event =
+              calendars[arg.event._def.extendedProps.calId].events[
+                arg.event._def.extendedProps.uid
+              ];
+
+            const originalStart = new Date(event.start);
+            const computedNewStart = new Date(
+              originalStart.getTime() + getDeltaInMilliseconds(arg.startDelta)
+            );
+            const originalEnd = new Date(event.end ?? "");
+            const computedNewEnd = new Date(
+              originalEnd.getTime() + getDeltaInMilliseconds(arg.endDelta)
+            );
+            const newEvent = {
+              ...event,
+              start: computedNewStart,
+              end: computedNewEnd,
+            } as CalendarEvent;
+            console.log(newEvent);
+            console.log(arg);
+            dispatch(
+              putEventAsync({ cal: calendars[newEvent.calId], newEvent })
+            );
+          }}
           headerToolbar={{
             left: "title",
             center: "prev,today,next",

src/features/Calendars/CalendarSlice.ts

@@ -147,6 +147,8 @@ const CalendarSlice = createSlice({
               state.list[action.payload.calId].color;
             state.list[action.payload.calId].events[id].calId =
               action.payload.calId;
+            state.list[action.payload.calId].events[id].timezone =
+              Intl.DateTimeFormat().resolvedOptions().timeZone;
           });
         }
       )
@@ -171,6 +173,8 @@ const CalendarSlice = createSlice({
               state.list[action.payload.calId].color;
             state.list[action.payload.calId].events[id].calId =
               action.payload.calId;
+            state.list[action.payload.calId].events[id].timezone =
+              Intl.DateTimeFormat().resolvedOptions().timeZone;
           });
         }
       )

src/utils/dateUtils.ts

@@ -27,3 +27,21 @@ export function getCalendarRange(date = new Date()) {
     end: endDate,
   };
 }
+
+export function getDeltaInMilliseconds(delta: {
+  years: number;
+  months: number;
+  days: number;
+  milliseconds: number;
+}) {
+  const MS_PER_DAY = 24 * 60 * 60 * 1000;
+  const AVG_MS_PER_MONTH = 30.44 * MS_PER_DAY; // approx
+  const AVG_MS_PER_YEAR = 365.25 * MS_PER_DAY; // approx
+
+  return (
+    (delta.years || 0) * AVG_MS_PER_YEAR +
+    (delta.months || 0) * AVG_MS_PER_MONTH +
+    (delta.days || 0) * MS_PER_DAY +
+    (delta.milliseconds || 0)
+  );
+}