@sunsama/event-calendar 0.2.0

package/src/utils/__tests___/generate-event-layout.test.ts

@@ -0,0 +1,277 @@
+import generateEventLayouts from "../generate-event-layouts";
+import { CalendarEvent, EventExtend } from "src/types";
+
+describe("generateEventLayouts", () => {
+  it("should separate all-day events and timed events", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "All-Day Event",
+        start: "2023-10-10T00:00:00Z",
+        end: "2023-10-11T02:00:00Z",
+        isAllDay: true,
+      },
+      {
+        id: "2",
+        calendarId: "primary-calendar",
+        title: "Timed Event",
+        start: "2023-10-10T08:30:00Z",
+        end: "2023-10-10T09:30:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+
+    expect(dayLayout).toBeDefined();
+    expect(dayLayout.allDayEventsLayout.length).toBe(1);
+    expect(dayLayout.partDayEventsLayout.length).toBe(1);
+    expect(dayLayout.allDayEventsLayout[0].event.id).toBe("1");
+    expect(dayLayout.partDayEventsLayout[0].event.id).toBe("2");
+  });
+
+  it("should handle events with overlapping times", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Event 1",
+        start: "2023-10-10T08:00:00Z",
+        end: "2023-10-10T09:00:00Z",
+      },
+      {
+        id: "2",
+        calendarId: "primary-calendar",
+        title: "Event 2",
+        start: "2023-10-10T08:30:00Z",
+        end: "2023-10-10T09:30:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    expect(dayLayout).toBeDefined();
+    const { partDayEventsLayout } = dayLayout;
+    expect(partDayEventsLayout.length).toBe(2);
+    // Overlapping events should have collisions.total = 2
+    expect(partDayEventsLayout[0].collisions?.total).toBe(2);
+    expect(partDayEventsLayout[1].collisions?.total).toBe(2);
+  });
+
+  it("should handle events with no overlap", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Event 1",
+        start: "2023-10-10T08:00:00Z",
+        end: "2023-10-10T09:00:00Z",
+      },
+      {
+        id: "2",
+        calendarId: "primary-calendar",
+        title: "Event 2",
+        start: "2023-10-10T09:30:00Z",
+        end: "2023-10-10T10:30:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    expect(dayLayout).toBeDefined();
+    const { partDayEventsLayout } = dayLayout;
+    expect(partDayEventsLayout.length).toBe(2);
+    expect(partDayEventsLayout[0].collisions).toBe(undefined);
+    expect(partDayEventsLayout[1].collisions).toBe(undefined);
+  });
+
+  it("should handle an empty event list", () => {
+    const events: CalendarEvent[] = [];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    // Depending on implementation, if no events exist, the day entry might be missing.
+    if (!dayLayout) {
+      expect(Object.keys(layouts).length).toBe(0);
+      return;
+    }
+    expect(dayLayout.allDayEventsLayout.length).toBe(0);
+    expect(dayLayout.partDayEventsLayout.length).toBe(0);
+  });
+
+  it("should handle a single event", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Event 1",
+        start: "2023-10-10T08:00:00Z",
+        end: "2023-10-10T09:00:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    expect(dayLayout.partDayEventsLayout.length).toBe(1);
+    expect(dayLayout.partDayEventsLayout[0].collisions).toBe(undefined);
+  });
+
+  it("should handle events spanning midnight", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Event 1",
+        start: "2023-10-10T05:00:00Z",
+        end: "2023-10-12T05:00:00Z",
+      },
+      {
+        id: "2",
+        calendarId: "primary-calendar",
+        title: "Event 2",
+        start: "2023-10-11T05:00:00Z",
+        end: "2023-10-11T09:00:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-12",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const layoutDay1 = layouts["2023-10-10"];
+    const layoutDay2 = layouts["2023-10-11"];
+    const layoutDay3 = layouts["2023-10-12"];
+
+    // Day 2 should see both events overlapping from 00:00–01:00
+    expect(layoutDay2?.allDayEventsLayout.length).toBe(1);
+    expect(layoutDay2?.partDayEventsLayout.length).toBe(1);
+
+    const evt1 = layoutDay1.allDayEventsLayout[0];
+    const evt2 = layoutDay2.allDayEventsLayout[0];
+    const evt3 = layoutDay3.allDayEventsLayout[0];
+
+    expect(evt1.extend).toBe(EventExtend.Future);
+    expect(evt2.extend).toBe(EventExtend.Both);
+    expect(evt3.extend).toBe(EventExtend.Past);
+  });
+
+  it("should handle events in different time zones", () => {
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Event 1",
+        start: "2023-10-10T08:00:00+00:00",
+        end: "2023-10-10T09:00:00+00:00",
+      },
+      {
+        id: "2",
+        calendarId: "secondary-calendar",
+        title: "Event 2",
+        start: "2023-10-10T08:00:00-04:00",
+        end: "2023-10-10T09:00:00-04:00",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    expect(dayLayout).toBeDefined();
+
+    const { partDayEventsLayout } = dayLayout;
+    expect(partDayEventsLayout.length).toBe(2);
+
+    // These events do not overlap in UTC after conversion, so expect collisions.total = 1 for each.
+    expect(partDayEventsLayout[0].collisions).toBe(undefined);
+    expect(partDayEventsLayout[1].collisions).toBe(undefined);
+  });
+
+  it("should prioritize primary calendar events in collision sorting", () => {
+    // Here we mix a primary calendar event with one from a non-primary calendar.
+    const events: CalendarEvent[] = [
+      {
+        id: "1",
+        calendarId: "primary-calendar",
+        title: "Primary Event",
+        start: "2023-10-10T08:00:00Z",
+        end: "2023-10-10T09:00:00Z",
+      },
+      {
+        id: "2",
+        calendarId: "secondary-calendar",
+        title: "Secondary Event",
+        start: "2023-10-10T08:15:00Z",
+        end: "2023-10-10T09:15:00Z",
+      },
+    ];
+
+    const layouts = generateEventLayouts({
+      startCalendarDate: "2023-10-10",
+      endCalendarDate: "2023-10-10",
+      events,
+      timezone: "UTC",
+      userCalendarId: "primary-calendar",
+    });
+
+    const dayLayout = layouts["2023-10-10"];
+    expect(dayLayout).toBeDefined();
+    const { partDayEventsLayout } = dayLayout;
+    expect(partDayEventsLayout.length).toBe(2);
+
+    // Expect both events to have collision data with total = 2.
+    const primaryEvent = partDayEventsLayout.find((e) => e.event.id === "1")!;
+    const secondaryEvent = partDayEventsLayout.find((e) => e.event.id === "2")!;
+    expect(primaryEvent.collisions?.total).toBe(2);
+    expect(secondaryEvent.collisions?.total).toBe(2);
+    // The primary event (from "primary-calendar") should be ordered before the secondary event.
+    expect(primaryEvent.collisions?.order).toBeLessThan(
+      secondaryEvent.collisions?.order || 0
+    );
+  });
+});

package/src/utils/calendar-layout.ts

@@ -0,0 +1,139 @@
+import { max } from "lodash";
+import { EventExtend } from "src/types";
+
+export class CalendarLayout {
+  // visibleX is an array of numbers representing the x indexes currently 'in view'
+  // enableWeekBreaks is a bool indicating if events are split at week boundary (monthview)
+  // startOfWeekXOffset is the offset to the start of the week from index 0
+  array2d: any[];
+  visibleX: Set<number>;
+  enableWeekBreaks: boolean;
+  startOfWeekXOffset: number;
+
+  constructor({
+    visibleX,
+    enableWeekBreaks,
+    startOfWeekXOffset,
+  }: {
+    visibleX: number[];
+    enableWeekBreaks: boolean;
+    startOfWeekXOffset: number;
+  }) {
+    this.array2d = [];
+    this.visibleX = new Set(visibleX);
+    this.enableWeekBreaks = enableWeekBreaks;
+    this.startOfWeekXOffset = startOfWeekXOffset;
+  }
+
+  getAt(x: number, y: number) {
+    return this.array2d[x] && this.array2d[x][y];
+  }
+
+  setAt(x: number, y: number, value: { value: any; meta: { x: any } }) {
+    let column = this.array2d[x];
+    if (!column) {
+      column = [];
+      this.array2d[x] = column;
+    }
+    column[y] = value;
+  }
+  // assign value to the line of cells from (x, y) to (x + w, y)
+  setRange(x: number, y: number, duration: number, value: any) {
+    for (let increment = 0; increment < duration; ++increment) {
+      this.setAt(x + increment, y, { value, meta: { x } });
+    }
+  }
+  // does the event starting time at x with duration w fit at position y?
+  fit(x: number, y: number, duration: number) {
+    for (let increment = 0; increment < duration; ++increment) {
+      if (this.getAt(x + increment, y)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  // find the row where the event starting at time x with duration w fits
+  findFit(x: number, duration: number) {
+    let rowIndex = 0;
+    while (!this.fit(x, rowIndex, duration)) {
+      ++rowIndex;
+    }
+    return rowIndex;
+  }
+  // inserts an event record into the matrix
+  findFitAndInsert(
+    eventStartIndex: number,
+    eventDurationDays: number,
+    event: any
+  ) {
+    const rowIndex = this.findFit(eventStartIndex, eventDurationDays);
+    this.setRange(eventStartIndex, rowIndex, eventDurationDays, event);
+  }
+  // find the height of the 2d array
+  height() {
+    return this.array2d.length > 0
+      ? max(this.array2d.map((col) => (col && col.length) || 0))
+      : 0;
+  }
+  // get the event and associated view data for the given cell
+  getViewAt(x: number, y: number) {
+    const record = this.getAt(x, y);
+    if (!record) {
+      return {};
+    }
+    const {
+      value: event,
+      meta: { x: rootX },
+    } = record;
+    const previousRecord = this.visibleX.has(x - 1)
+      ? this.getAt(x - 1, y)
+      : null;
+    if (event) {
+      const isPrimaryRendered =
+        x === rootX ||
+        !previousRecord ||
+        previousRecord.value !== event ||
+        (this.enableWeekBreaks &&
+          Math.floor((x + this.startOfWeekXOffset) / 7) !==
+            Math.floor((x + this.startOfWeekXOffset - 1) / 7));
+      // count the contiguous visible days for this event
+      let visibleWidthDays = 1;
+      while (
+        this.visibleX.has(x + visibleWidthDays) &&
+        (!this.enableWeekBreaks ||
+          Math.floor((x + this.startOfWeekXOffset + visibleWidthDays) / 7) ===
+            Math.floor(
+              (x + this.startOfWeekXOffset + visibleWidthDays - 1) / 7
+            )) &&
+        this.getAt(x + visibleWidthDays, y) &&
+        this.getAt(x + visibleWidthDays, y).value === event
+      ) {
+        visibleWidthDays++;
+      }
+
+      const wrapStart = x !== rootX;
+      const wrapEnd =
+        this.getAt(x + visibleWidthDays, y) &&
+        this.getAt(x + visibleWidthDays, y).value === event;
+
+      let extend = EventExtend.None;
+
+      if (wrapStart && wrapEnd) {
+        extend = EventExtend.Both;
+      } else if (wrapStart) {
+        extend = EventExtend.Past;
+      } else if (wrapEnd) {
+        extend = EventExtend.Future;
+      }
+
+      return {
+        event,
+        visibleWidthDays,
+        isPrimaryRendered,
+        extend,
+      };
+    }
+
+    return {};
+  }
+}

package/src/utils/compute-positioning.ts

@@ -0,0 +1,44 @@
+import moment, { Moment } from "moment-timezone";
+import { CollisionObject, EventPosition } from "src/types";
+
+type ComputePositioning = {
+  // We only need the collisions part of this type
+  collisionObject: CollisionObject;
+  startOfDayMoment: Moment;
+  timezone: string;
+};
+
+const computePositioning = ({
+  collisionObject,
+  startOfDayMoment,
+  timezone,
+}: ComputePositioning): EventPosition => {
+  const startDateMoment = moment.tz(collisionObject.event.start, timezone);
+  const durationMinutes = moment
+    .tz(collisionObject.event.end, timezone)
+    .diff(startDateMoment, "minutes");
+
+  let width = 100;
+  let margin = 0;
+
+  const top = startDateMoment.diff(startOfDayMoment, "minutes");
+  const height = Math.max(30, durationMinutes);
+  const collisions = collisionObject.collisions;
+
+  if (collisions) {
+    margin = (100 / collisions.total) * collisions.order;
+    width =
+      collisions.order + 1 < collisions.total
+        ? Math.max(100 - 12 * collisions.total, 20)
+        : 100 / collisions.total;
+  }
+
+  return {
+    top,
+    height,
+    width: `${width}%`,
+    marginLeft: `${margin}%`,
+  };
+};
+
+export default computePositioning;

package/src/utils/date-utils.ts

@@ -0,0 +1,238 @@
+import moment, { type Moment } from "moment-timezone";
+import { isDate, range, size } from "lodash";
+import { CalendarEvent, PrefabHour } from "src/types";
+
+export const generatePrefabHours = (
+  timeFormat: string = "HH:mm"
+): PrefabHour[] => {
+  const startOfDayMoment = moment().startOf("day");
+
+  return [...Array(24).keys()].reduce(
+    (
+      accum: {
+        increment: number;
+        hourFormatted: string;
+        hourMoment: Moment;
+      }[],
+      increment
+    ) => {
+      const hourMoment = startOfDayMoment.clone().hour(increment);
+
+      accum.push({
+        increment,
+        hourFormatted: hourMoment.format(timeFormat),
+        hourMoment,
+      });
+
+      return accum;
+    },
+    []
+  );
+};
+
+// Returns a new moment instance at the start of the week in the user's
+// timezone, with the user's start of week preference applied.
+export const startOfUserWeek = (
+  startDayOfWeekOffset: number,
+  dateOrMoment: Date | Moment | string,
+  timezone: string
+) => {
+  // If the day is Sunday, and the user's start of week preference is Sunday, return the day
+  // otherwise, the start of the 'isoWeek' will be for the previous week
+  if (
+    startDayOfWeekOffset === 0 &&
+    moment.tz(dateOrMoment, timezone).isoWeekday() === 7
+  ) {
+    return moment.tz(dateOrMoment, timezone).startOf("day");
+  }
+
+  return moment
+    .tz(dateOrMoment, timezone)
+    .startOf("isoWeek")
+    .isoWeekday(startDayOfWeekOffset);
+};
+
+export const isAllDayOrSpansMidnight = (
+  calendarEvent: CalendarEvent,
+  timezone: string
+) => {
+  const { start, end, isAllDay } = calendarEvent;
+
+  if (isAllDay) {
+    return true;
+  }
+
+  // Does the range start/end span midnight in the given timezone?
+  const startMoment = moment.tz(start, timezone);
+  const endMoment = moment.tz(end, timezone);
+
+  // Handle special case where range ends at midnight exactly, in which case spansMidnight should return false
+  return !startMoment.isSame(
+    endMoment.hour() === 0 ? endMoment.subtract(1, "minute") : endMoment,
+    "day"
+  );
+};
+
+// Returns the count of unique dates in the provided timezone
+export const getDurationInDays = (
+  calendarEvent: CalendarEvent,
+  timezone: string
+) => {
+  // the event duration in days calculation depends on if the event is all day
+  return calendarEvent.isAllDay
+    ? moment
+        .tz(calendarEvent.end, timezone)
+        .diff(moment.tz(calendarEvent.start, timezone), "days") + 1
+    : size(
+        daysInRange({
+          startDate: calendarEvent.start,
+          endDate: calendarEvent.end,
+          timezone,
+        })
+      );
+};
+
+// Returns an array of days (e.g. ['2022-01-02']) in a given date range.
+export const daysInRange = ({
+  startDate,
+  endDate,
+  timezone,
+}: {
+  startDate: Date | string;
+  endDate: Date | string;
+  timezone: string;
+}) => {
+  const countOfDaysInRange = moment
+    .tz(endDate, timezone)
+    .diff(moment.tz(startDate, timezone), "days");
+  const startDay = moment.tz(startDate, timezone).format("YYYY-MM-DD");
+  const days = [];
+  // Make sure we loop at a max of 30 times here as we had events that were scheduled for all day long for
+  // 1000 years in the future and this was causing the app to crash
+  for (
+    let countOfDaysAfterStart = 0;
+    countOfDaysAfterStart <= Math.min(30, Math.abs(countOfDaysInRange));
+    countOfDaysAfterStart++
+  ) {
+    days.push(
+      moment
+        .tz(startDay, timezone)
+        .add(countOfDaysAfterStart, "day")
+        .format("YYYY-MM-DD")
+    );
+  }
+  return days;
+};
+
+export const getDuration = (
+  calendarEvent: CalendarEvent,
+  trueDuration?: boolean
+) => {
+  const minDiff =
+    (new Date(calendarEvent.end).valueOf() -
+      new Date(calendarEvent.start).valueOf()) /
+    (1000 * 60);
+
+  // If all-day, we want to throw in an extra 24 hours since we represent them a bit oddly.
+  return calendarEvent.isAllDay && !trueDuration
+    ? minDiff + 24 * 60 * 60
+    : minDiff;
+};
+
+export const computeCalendarDateRange = (
+  date: string | Date | Moment,
+  tz: string,
+  viewType: "month" | "workweek" | "3day" | "1day" | "week",
+  startDayOfWeekOffset: number
+) => {
+  const momentDate = moment.tz(date, tz).startOf("day").toDate();
+
+  let basis: Moment;
+  let dayIndexes: number[];
+
+  if (viewType === "month") {
+    const startOfMonth = moment.tz(momentDate, tz).startOf("month");
+    const numberOfDaysInViewBeforeStartOfMonth =
+      startOfMonth.isoWeekday() - startDayOfWeekOffset;
+    basis = startOfMonth.subtract(numberOfDaysInViewBeforeStartOfMonth, "days");
+    const startOfRange = 0;
+    const numberOfDaysInViewAfterEndOfMonth =
+      (numberOfDaysInViewBeforeStartOfMonth +
+        moment.tz(date, tz).daysInMonth()) %
+      7
+        ? 7 -
+          ((numberOfDaysInViewBeforeStartOfMonth +
+            moment.tz(date, tz).daysInMonth()) %
+            7)
+        : 0;
+    const endOfRange =
+      numberOfDaysInViewBeforeStartOfMonth +
+      moment.tz(date, tz).daysInMonth() +
+      numberOfDaysInViewAfterEndOfMonth;
+    dayIndexes = range(startOfRange, endOfRange);
+  } else if (viewType === "workweek") {
+    basis = startOfUserWeek(startDayOfWeekOffset, momentDate, tz);
+    dayIndexes = range(0, 7).filter(
+      (dayIndex) =>
+        [0, 6].indexOf(basis.clone().add(dayIndex, "day").day()) === -1
+    );
+  } else if (viewType === "3day") {
+    // On PYD, we need to see more than just today, as potentially we'll see yesterday and tomorrow
+    basis = moment.tz(momentDate, tz);
+    dayIndexes = [0, 1, 2];
+  } else if (viewType === "1day") {
+    basis = moment.tz(momentDate, tz);
+    dayIndexes = [0];
+  } else {
+    basis = startOfUserWeek(startDayOfWeekOffset, momentDate, tz);
+    dayIndexes = range(0, 7);
+  }
+
+  const days = dayIndexes.map((dayIndex) =>
+    moment.tz(basis, tz).add(dayIndex, "day").toDate()
+  );
+  const calendarDates = dayIndexes.map((dayIndex) =>
+    moment.tz(basis, tz).add(dayIndex, "day").format("YYYY-MM-DD")
+  );
+
+  return {
+    basisDate: moment(basis, tz).toDate(),
+    dayIndexes,
+    days,
+    startDate: days[0],
+    endDate: moment
+      .tz(days[days.length - 1], tz)
+      .add(1, "day")
+      .toDate(),
+    calendarDates,
+    startCalendarDate: calendarDates[0],
+    endCalendarDate: calendarDates[calendarDates.length - 1],
+  };
+};
+
+// tests if the date ranges intersect
+export const dateRangeIntersect = (
+  { startDate: start0, endDate: end0 }: { startDate: Date; endDate: Date },
+  { startDate: start1, endDate: end1 }: { startDate: Date; endDate: Date }
+) => {
+  if (!isDate(start0) || !isDate(end0) || !isDate(start1) || !isDate(end1)) {
+    throw `invalid parameter ${start0} ${end0}; must pass dates`;
+  }
+
+  const s0 = start0.getTime();
+  const e0 = end0.getTime();
+  const s1 = start1.getTime();
+  const e1 = end1.getTime();
+
+  if (s0 > e0 || s1 > e1) {
+    return false;
+  }
+
+  return isBetween(s0, s1, e1) || isBetween(s1, s0, e0);
+};
+
+const isBetween = (
+  value: number,
+  startInclusive: number,
+  endExclusive: number
+) => value >= startInclusive && value < endExclusive;