@isma91/react-scheduler 4.0.0

package/src/lib/helpers/generals.tsx

@@ -0,0 +1,354 @@
+import {
+  addDays,
+  addMilliseconds,
+  addMinutes,
+  addSeconds,
+  differenceInDays,
+  differenceInMilliseconds,
+  endOfDay,
+  format,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isWithinInterval,
+  startOfDay,
+  subMinutes,
+} from "date-fns";
+import { View } from "../components/nav/Navigation";
+import {
+  DefaultResource,
+  FieldProps,
+  ProcessedEvent,
+  ResourceFields,
+  SchedulerProps,
+} from "../types";
+import { StateEvent } from "../views/Editor";
+
+export const getOneView = (state: Partial<SchedulerProps>): View => {
+  if (state.month) {
+    return "month";
+  } else if (state.week) {
+    return "week";
+  } else if (state.day) {
+    return "day";
+  }
+  throw new Error("No views were selected");
+};
+
+export const getAvailableViews = (state: SchedulerProps) => {
+  const views: View[] = [];
+  if (state.month) {
+    views.push("month");
+  }
+  if (state.week) {
+    views.push("week");
+  }
+  if (state.day) {
+    views.push("day");
+  }
+  return views;
+};
+
+export const arraytizeFieldVal = (field: FieldProps, val: any, event?: StateEvent) => {
+  const arrytize = field.config?.multiple && !Array.isArray(event?.[field.name] || field.default);
+  const value = arrytize ? (val ? [val] : []) : val;
+  const validity = arrytize ? value.length : value;
+  return { value, validity };
+};
+
+export const getResourcedEvents = (
+  events: ProcessedEvent[],
+  resource: DefaultResource,
+  resourceFields: ResourceFields,
+  fields: FieldProps[]
+): ProcessedEvent[] => {
+  const keyName = resourceFields.idField;
+  const resourceField = fields.find((f) => f.name === keyName);
+  const isMultiple = !!resourceField?.config?.multiple;
+
+  const resourcedEvents = [];
+
+  for (const event of events) {
+    // Handle single select & multiple select accordingly
+    const arrytize = isMultiple && !Array.isArray(event[keyName]);
+    const eventVal = arrytize ? [event[keyName]] : event[keyName];
+
+    const isThisResource =
+      isMultiple || Array.isArray(eventVal)
+        ? eventVal.includes(resource[keyName])
+        : eventVal === resource[keyName];
+
+    if (isThisResource) {
+      resourcedEvents.push({
+        ...event,
+        color: event.color || resource[resourceFields.colorField || ""],
+      });
+    }
+  }
+
+  return resourcedEvents;
+};
+
+export const traversCrossingEvents = (
+  todayEvents: ProcessedEvent[],
+  event: ProcessedEvent
+): ProcessedEvent[] => {
+  return todayEvents.filter(
+    (e) =>
+      e.event_id !== event.event_id &&
+      (isWithinInterval(addMinutes(event.start, 1), {
+        start: e.start,
+        end: e.end,
+      }) ||
+        isWithinInterval(addMinutes(event.end, -1), {
+          start: e.start,
+          end: e.end,
+        }) ||
+        isWithinInterval(addMinutes(e.start, 1), {
+          start: event.start,
+          end: event.end,
+        }) ||
+        isWithinInterval(addMinutes(e.end, -1), {
+          start: event.start,
+          end: event.end,
+        }))
+  );
+};
+
+export const calcMinuteHeight = (cellHeight: number, step: number) => {
+  return Math.ceil(cellHeight) / step;
+};
+
+export const calcCellHeight = (tableHeight: number, hoursLength: number) => {
+  return Math.max(tableHeight / hoursLength, 60);
+};
+
+export const differenceInDaysOmitTime = (start: Date, end: Date) => {
+  return differenceInDays(endOfDay(addSeconds(end, -1)), startOfDay(start));
+};
+
+export const convertRRuleDateToDate = (rruleDate: Date) => {
+  return new Date(
+    rruleDate.getUTCFullYear(),
+    rruleDate.getUTCMonth(),
+    rruleDate.getUTCDate(),
+    rruleDate.getUTCHours(),
+    rruleDate.getUTCMinutes()
+  );
+};
+
+export const getRecurrencesForDate = (event: ProcessedEvent, today: Date, timeZone?: string) => {
+  const duration = differenceInMilliseconds(event.end, event.start);
+  if (event.recurring) {
+    return event.recurring
+      ?.between(addDays(today, -1), addDays(today, 1), true)
+      .map((d: Date, index: number) => {
+        const start = convertRRuleDateToDate(d);
+        return {
+          ...event,
+          recurrenceId: index,
+          start: start,
+          end: addMilliseconds(start, duration),
+        };
+      })
+      .map((event) => convertEventTimeZone(event, timeZone));
+  }
+  return [convertEventTimeZone(event, timeZone)];
+};
+
+export const filterTodayEvents = (
+  events: ProcessedEvent[],
+  today: Date,
+  timeZone?: string,
+  forceInlineMultiDay?: boolean
+): ProcessedEvent[] => {
+  const list: ProcessedEvent[] = [];
+
+  for (let i = 0; i < events.length; i++) {
+    for (const rec of getRecurrencesForDate(events[i], today, timeZone)) {
+      const isSingleDayEvent =
+        !rec.allDay && isSameDay(today, rec.start) && !differenceInDaysOmitTime(rec.start, rec.end);
+
+      if (isSingleDayEvent) {
+        list.push(rec);
+        continue;
+      }
+
+      if (forceInlineMultiDay && !rec.allDay && differenceInDaysOmitTime(rec.start, rec.end) > 0) {
+        const dayStart = startOfDay(today);
+        const dayEnd = endOfDay(today);
+
+        const eventOverlapsToday =
+          isWithinInterval(today, { start: startOfDay(rec.start), end: endOfDay(rec.end) }) ||
+          isWithinInterval(rec.start, { start: dayStart, end: dayEnd }) ||
+          isWithinInterval(rec.end, { start: dayStart, end: dayEnd });
+
+        if (eventOverlapsToday) {
+          const segmentStart = isBefore(rec.start, dayStart) ? dayStart : rec.start;
+          const segmentEnd = isAfter(rec.end, dayEnd) ? dayEnd : rec.end;
+
+          list.push({
+            ...rec,
+            start: segmentStart,
+            end: segmentEnd,
+            _originalStart: rec.start,
+            _originalEnd: rec.end,
+            _hasPrev: isBefore(rec.start, dayStart),
+            _hasNext: isAfter(rec.end, dayEnd),
+          });
+        }
+      }
+    }
+  }
+
+  // Sort by the length est event
+  return sortEventsByTheLengthest(list);
+};
+
+export const filterTodayAgendaEvents = (events: ProcessedEvent[], today: Date) => {
+  const list: ProcessedEvent[] = events.filter((ev) =>
+    isWithinInterval(today, {
+      start: startOfDay(ev.start),
+      end: endOfDay(subMinutes(ev.end, 1)),
+    })
+  );
+
+  return sortEventsByTheEarliest(list);
+};
+
+export const sortEventsByTheLengthest = (events: ProcessedEvent[]) => {
+  return events.sort((a, b) => {
+    const aDiff = a.end.getTime() - a.start.getTime();
+    const bDiff = b.end.getTime() - b.start.getTime();
+    return bDiff - aDiff;
+  });
+};
+
+export const sortEventsByTheEarliest = (events: ProcessedEvent[]) => {
+  return events.sort((a, b) => {
+    const isMulti = a.allDay || differenceInDaysOmitTime(a.start, a.end) > 0;
+    return isMulti ? -1 : a.start.getTime() - b.start.getTime();
+  });
+};
+
+export const filterMultiDaySlot = (
+  events: ProcessedEvent[],
+  date: Date | Date[],
+  timeZone?: string,
+  lengthOnly?: boolean,
+  forceInlineMultiDay?: boolean
+) => {
+  const isMultiDates = Array.isArray(date);
+  const list: ProcessedEvent[] = [];
+  const multiPerDay: Record<string, ProcessedEvent[]> = {};
+  for (let i = 0; i < events.length; i++) {
+    const event = convertEventTimeZone(events[i], timeZone);
+    const isMultiDay = differenceInDaysOmitTime(event.start, event.end) > 0;
+    const shouldForceInline = forceInlineMultiDay && !event.allDay && isMultiDay;
+    let withinSlot = event.allDay || (isMultiDay && !shouldForceInline);
+    if (!withinSlot) continue;
+    if (isMultiDates) {
+      withinSlot = date.some((weekday) =>
+        isWithinInterval(weekday, {
+          start: startOfDay(event.start),
+          end: endOfDay(event.end),
+        })
+      );
+    } else {
+      withinSlot = isWithinInterval(date, {
+        start: startOfDay(event.start),
+        end: endOfDay(event.end),
+      });
+    }
+
+    if (withinSlot) {
+      list.push(event);
+      if (isMultiDates) {
+        for (const d of date) {
+          const start = format(d, "yyyy-MM-dd");
+          if (isWithinInterval(d, { start: startOfDay(event.start), end: endOfDay(event.end) })) {
+            multiPerDay[start] = (multiPerDay[start] || []).concat(event);
+          }
+        }
+      } else {
+        const start = format(event.start, "yyyy-MM-dd");
+        multiPerDay[start] = (multiPerDay[start] || []).concat(event);
+      }
+    }
+  }
+
+  if (isMultiDates && lengthOnly) {
+    return Object.values(multiPerDay).sort((a, b) => b.length - a.length)?.[0] || [];
+  }
+
+  return list;
+};
+
+export const convertEventTimeZone = (event: ProcessedEvent, timeZone?: string) => {
+  return {
+    ...event,
+    start: getTimeZonedDate(event.start, timeZone),
+    end: getTimeZonedDate(event.end, timeZone),
+    convertedTz: true,
+  };
+};
+
+export const getTimeZonedDate = (date: Date, timeZone?: string) => {
+  return new Date(
+    new Intl.DateTimeFormat("en-US", {
+      dateStyle: "short",
+      timeStyle: "medium",
+      timeZone,
+    }).format(date)
+  );
+};
+
+/**
+ * Performs the reverse of getTimeZonedDate, IE: the given date is assumed
+ * to already be in the provided timeZone and is reverted to the local
+ * browser's timeZone.
+ * @param date The date to convert.
+ * @param timeZone The timeZone to convert from.
+ * @returns A new date reverted from the given timeZone to local time.
+ */
+export const revertTimeZonedDate = (date: Date, timeZone?: string) => {
+  if (!timeZone) {
+    return date;
+  }
+
+  // This always gets the offset between the local computer's time
+  // and UTC. It has nothing to do with the value of the date object,
+  // despite being an instance method.
+  const localOffset = -date.getTimezoneOffset();
+  const desiredOffset = getTimezoneOffset(timeZone);
+  const diff = localOffset - desiredOffset;
+  return new Date(date.getTime() + diff * 60 * 1000);
+};
+
+export const isTimeZonedToday = ({
+  dateLeft,
+  dateRight,
+  timeZone,
+}: {
+  dateLeft: Date;
+  dateRight?: Date;
+  timeZone?: string;
+}) => {
+  return isSameDay(dateLeft, getTimeZonedDate(dateRight || new Date(), timeZone));
+};
+
+export const getHourFormat = (hourFormat: "12" | "24") => {
+  return hourFormat === "12" ? "hh:mm a" : "HH:mm";
+};
+
+/**
+ * Gets the offset in minutes of the provided timeZone.
+ * @param timeZone The timeZone to get the offset for.
+ * @returns The offset in minutes of the provided timeZone.
+ */
+function getTimezoneOffset(timeZone: string) {
+  const now = new Date();
+  const localizedTime = new Date(now.toLocaleString("en-US", { timeZone }));
+  const utcTime = new Date(now.toLocaleString("en-US", { timeZone: "UTC" }));
+  return Math.round((localizedTime.getTime() - utcTime.getTime()) / (60 * 1000));
+}

package/src/lib/hooks/useArrowDisable.ts

@@ -0,0 +1,26 @@
+import { endOfMonth, endOfWeek, startOfMonth, startOfWeek } from "date-fns";
+import useStore from "./useStore";
+
+const useArrowDisable = () => {
+  const { selectedDate, week, navigationPickerProps, view } = useStore();
+  const minDate = navigationPickerProps?.minDate;
+  const maxDate = navigationPickerProps?.maxDate;
+  const endDate =
+    view === "month"
+      ? endOfMonth(selectedDate)
+      : view === "week"
+        ? endOfWeek(selectedDate, { weekStartsOn: week?.weekStartOn })
+        : selectedDate;
+  const startDate =
+    view === "month"
+      ? startOfMonth(selectedDate)
+      : view === "week"
+        ? startOfWeek(selectedDate, { weekStartsOn: week?.weekStartOn })
+        : selectedDate;
+  const prevDisabled = minDate ? startDate <= minDate : false;
+  const nextDisabled = maxDate ? endDate >= maxDate : false;
+
+  return { prevDisabled, nextDisabled };
+};
+
+export default useArrowDisable;

package/src/lib/hooks/useCellAttributes.ts

@@ -0,0 +1,67 @@
+import { DragEvent } from "react";
+import { alpha, useTheme } from "@mui/material";
+import useStore from "./useStore";
+import { revertTimeZonedDate } from "../helpers/generals";
+
+interface Props {
+  start: Date;
+  end: Date;
+  resourceKey: string;
+  resourceVal: string | number;
+}
+export const useCellAttributes = ({ start, end, resourceKey, resourceVal }: Props) => {
+  const {
+    triggerDialog,
+    onCellClick,
+    onDrop,
+    currentDragged,
+    setCurrentDragged,
+    editable,
+    timeZone,
+  } = useStore();
+  const theme = useTheme();
+
+  return {
+    tabIndex: editable ? 0 : -1,
+    disableRipple: !editable,
+    onClick: () => {
+      if (editable) {
+        triggerDialog(true, {
+          start,
+          end,
+          [resourceKey]: resourceVal,
+        });
+      }
+
+      if (onCellClick && typeof onCellClick === "function") {
+        onCellClick(start, end, resourceKey, resourceVal);
+      }
+    },
+    onDragOver: (e: DragEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      if (currentDragged) {
+        e.currentTarget.style.backgroundColor = alpha(theme.palette.secondary.main, 0.3);
+      }
+    },
+    onDragEnter: (e: DragEvent<HTMLButtonElement>) => {
+      if (currentDragged) {
+        e.currentTarget.style.backgroundColor = alpha(theme.palette.secondary.main, 0.3);
+      }
+    },
+    onDragLeave: (e: DragEvent<HTMLButtonElement>) => {
+      if (currentDragged) {
+        e.currentTarget.style.backgroundColor = "";
+      }
+    },
+    onDrop: (e: DragEvent<HTMLButtonElement>) => {
+      if (currentDragged && currentDragged.event_id) {
+        e.preventDefault();
+        e.currentTarget.style.backgroundColor = "";
+        const zonedStart = revertTimeZonedDate(start, timeZone);
+        onDrop(e, currentDragged.event_id.toString(), zonedStart, resourceKey, resourceVal);
+        setCurrentDragged();
+      }
+    },
+    [resourceKey]: resourceVal,
+  };
+};

package/src/lib/hooks/useDragAttributes.ts

@@ -0,0 +1,31 @@
+import { DragEvent } from "react";
+import { ProcessedEvent } from "../types";
+import { useTheme } from "@mui/material";
+import useStore from "./useStore";
+
+const useDragAttributes = (event: ProcessedEvent) => {
+  const { setCurrentDragged } = useStore();
+  const theme = useTheme();
+  return {
+    draggable: true,
+    onDragStart: (e: DragEvent<HTMLElement>) => {
+      e.stopPropagation();
+      setCurrentDragged(event);
+      e.currentTarget.style.backgroundColor = theme.palette.error.main;
+    },
+    onDragEnd: (e: DragEvent<HTMLElement>) => {
+      setCurrentDragged();
+      e.currentTarget.style.backgroundColor = event.color || theme.palette.primary.main;
+    },
+    onDragOver: (e: DragEvent<HTMLElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    onDragEnter: (e: DragEvent<HTMLElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+  };
+};
+
+export default useDragAttributes;

package/src/lib/hooks/useEventPermissions.ts

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { ProcessedEvent } from "../types";
+import useStore from "./useStore";
+
+const useEventPermissions = (event: ProcessedEvent) => {
+  const { editable, deletable, draggable } = useStore();
+
+  const canEdit = useMemo(() => {
+    // Priority control to event specific editable value
+    if (typeof event.editable !== "undefined") {
+      return event.editable;
+    }
+    return editable;
+  }, [editable, event.editable]);
+
+  const canDelete = useMemo(() => {
+    // Priority control to event specific deletable value
+    if (typeof event.deletable !== "undefined") {
+      return event.deletable;
+    }
+    return deletable;
+  }, [deletable, event.deletable]);
+
+  const canDrag = useMemo(() => {
+    if (!canEdit) {
+      return;
+    }
+    // Priority control to event specific draggable value
+    if (typeof event.draggable !== "undefined") {
+      return event.draggable;
+    }
+    return draggable;
+  }, [draggable, event.draggable, canEdit]);
+
+  return {
+    canEdit,
+    canDelete,
+    canDrag,
+  };
+};
+
+export default useEventPermissions;

package/src/lib/hooks/useStore.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { StoreContext } from "../store/context";
+
+const useStore = () => {
+  return useContext(StoreContext);
+};
+
+export default useStore;

package/src/lib/hooks/useSyncScroll.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * The solution to make headers sticky with overflow
+ */
+const useSyncScroll = () => {
+  const headersRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const header = headersRef.current;
+    const body = bodyRef.current;
+    const handleScroll = (event: Event) => {
+      const el = event.currentTarget as HTMLElement;
+      body?.scroll({ left: el.scrollLeft });
+      header?.scroll({ left: el.scrollLeft });
+    };
+
+    header?.addEventListener("scroll", handleScroll);
+    body?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      header?.removeEventListener("scroll", handleScroll);
+      body?.removeEventListener("scroll", handleScroll);
+    };
+  });
+
+  return { headersRef, bodyRef };
+};
+
+export default useSyncScroll;

package/src/lib/hooks/useWindowResize.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+export function useWindowResize() {
+  const [state, setState] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handler = () => {
+      setState((state) => {
+        const { innerWidth, innerHeight } = window;
+        //Check state for change, return same state if no change happened to prevent rerender
+        return state.width !== innerWidth || state.height !== innerHeight
+          ? {
+              width: innerWidth,
+              height: innerHeight,
+            }
+          : state;
+      });
+    };
+
+    handler();
+    window.addEventListener("resize", handler, {
+      capture: false,
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+
+  return state;
+}

package/src/lib/index.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import SchedulerComponent from "./SchedulerComponent";
+import { Scheduler as SchedulerProps, SchedulerRef } from "./types";
+import { StoreProvider } from "./store/provider";
+
+const Scheduler = forwardRef<SchedulerRef, SchedulerProps>(function Scheduler(props, ref) {
+  return (
+    <StoreProvider initial={props}>
+      <SchedulerComponent ref={ref} />
+    </StoreProvider>
+  );
+});
+
+export { Scheduler };

package/src/lib/positionManger/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+export type PositionManagerState = {
+  renderedSlots: { [day: string]: { [resourceId: string]: { [eventId: string]: number } } };
+};
+
+type PositionManagerProps = {
+  setRenderedSlot(day: string, eventId: string, position: number, resourceId?: string): void;
+};
+
+export const PositionContext = createContext<PositionManagerState & PositionManagerProps>({
+  renderedSlots: {},
+  setRenderedSlot: () => {},
+});