@sunsama/event-calendar 0.13.2 → 0.13.5

package/src/utils/date-utils.ts

@@ -2,6 +2,46 @@ import moment, { type Moment } from "moment-timezone";
 import { isDate, range, size } from "lodash";
 import { CalendarEvent, PrefabHour } from "../types";
 
+// Cached Intl.DateTimeFormat instances for fast timezone-aware day/hour extraction.
+// Avoids creating Moment instances in hot paths like isAllDayOrSpansMidnight.
+let _cachedTz = "";
+let _dayFormatter: Intl.DateTimeFormat;
+let _hourFormatter: Intl.DateTimeFormat;
+
+function ensureFormatters(timezone: string) {
+  if (timezone !== _cachedTz) {
+    _cachedTz = timezone;
+    _dayFormatter = new Intl.DateTimeFormat("en-CA", { timeZone: timezone });
+    _hourFormatter = new Intl.DateTimeFormat("en-GB", {
+      hour: "2-digit",
+      hour12: false,
+      timeZone: timezone,
+    });
+  }
+}
+
+function toDate(date: Date | string): Date {
+  return typeof date === "string" ? new Date(date) : date;
+}
+
+// Event layouts flow into Reanimated worklet closures (useAnimatedReaction,
+// useAnimatedStyle, gesture handlers), which can't clone a `Date` instance
+// across the JS/UI thread boundary ("[Worklets] Cannot copy value of type
+// 'Date'."). Consumers may pass `start`/`end` as `Date` objects even though
+// `CalendarEvent` types them as `string`, so normalize to ISO strings as
+// soon as events enter the layout pipeline.
+export const normalizeEventDates = <T extends CalendarEvent>(event: T): T => {
+  if (!isDate(event.start) && !isDate(event.end)) {
+    return event;
+  }
+
+  return {
+    ...event,
+    start: isDate(event.start) ? event.start.toISOString() : event.start,
+    end: isDate(event.end) ? event.end.toISOString() : event.end,
+  };
+};
+
 export const generatePrefabHours = (
   timeFormat: string = "HH:mm"
 ): PrefabHour[] => {
@@ -62,15 +102,19 @@ export const isAllDayOrSpansMidnight = <T extends CalendarEvent>(
     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);
+  ensureFormatters(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"
-  );
+  const endDateObj = toDate(end);
+
+  // If end hour is 0 in user's timezone, subtract 1 minute so events
+  // ending exactly at midnight aren't considered as spanning midnight
+  const endHour = parseInt(_hourFormatter.format(endDateObj), 10);
+  const effectiveEnd =
+    endHour === 0 ? new Date(endDateObj.getTime() - 60_000) : endDateObj;
+
+  const startDay = _dayFormatter.format(toDate(start));
+  const endDay = _dayFormatter.format(effectiveEnd);
+  return startDay !== endDay;
 };
 
 // Returns the count of unique dates in the provided timezone
@@ -79,17 +123,20 @@ export const getDurationInDays = <T extends CalendarEvent>(
   timezone: string
 ) => {
   // the event duration in days calculation depends on if the event is all day
-  return calendarEvent.isAllDay
-    ? moment
+  if (calendarEvent.isAllDay) {
+    return (
+      moment
         .tz(calendarEvent.end, timezone)
         .diff(moment.tz(calendarEvent.start, timezone), "days") + 1
-    : size(
-        daysInRange({
-          startDate: calendarEvent.start,
-          endDate: calendarEvent.end,
-          timezone,
-        })
-      );
+    );
+  }
+  return size(
+    daysInRange({
+      startDate: calendarEvent.start,
+      endDate: calendarEvent.end,
+      timezone,
+    })
+  );
 };
 
 // Returns an array of days (e.g. ['2022-01-02']) in a given date range.
@@ -102,23 +149,20 @@ export const daysInRange = ({
   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 startMoment = moment.tz(startDate, timezone);
+  const endMoment = moment.tz(endDate, timezone);
+  const countOfDaysInRange = endMoment.diff(startMoment, "days");
   const days = [];
+  const maxIterations = Math.min(30, Math.abs(countOfDaysInRange));
   // 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 <= maxIterations;
     countOfDaysAfterStart++
   ) {
     days.push(
-      moment
-        .tz(startDay, timezone)
-        .add(countOfDaysAfterStart, "day")
-        .format("YYYY-MM-DD")
+      startMoment.clone().add(countOfDaysAfterStart, "day").format("YYYY-MM-DD")
     );
   }
   return days;

package/src/utils/generate-event-layouts.ts

@@ -10,6 +10,7 @@ import {
   getDuration,
   getDurationInDays,
   isAllDayOrSpansMidnight,
+  normalizeEventDates,
   startOfUserWeek,
 } from "../utils/date-utils";
 import computePositioning from "../utils/compute-positioning";
@@ -42,6 +43,10 @@ export const generateEventLayouts = <T extends CalendarEvent>({
   startDayOfWeekOffset = 0,
   timezone,
 }: GenerateEventLayouts<T>) => {
+  // Normalize start/end to strings before events flow into any layout object,
+  // since layouts get closed over by Reanimated worklets that can't clone Dates.
+  events = events.map(normalizeEventDates);
+
   // Calculate spacial layout for CalendarViewDay events
   // in month view, midnight-spanning part-day events are rendered as all-day multi-day
   const [allDayEvents, partDayEvents] = _partition([...events], (event) =>
@@ -76,16 +81,13 @@ export const generateEventLayouts = <T extends CalendarEvent>({
     ...(calendarViewInterval === "month" ? partDayEventsSorted : []),
   ];
 
-  const visibleDayCount = moment
-    .tz(endCalendarDate, timezone)
-    .diff(moment.tz(startCalendarDate, timezone), "days");
+  const startCalendarMoment = moment.tz(startCalendarDate, timezone);
+  const endCalendarMoment = moment.tz(endCalendarDate, timezone);
+  const visibleDayCount = endCalendarMoment.diff(startCalendarMoment, "days");
   const visibleDays: string[] = [];
   for (let dayCount = 0; dayCount <= visibleDayCount; dayCount++) {
     visibleDays.push(
-      moment
-        .tz(startCalendarDate, timezone)
-        .add(dayCount, "day")
-        .format("YYYY-MM-DD")
+      startCalendarMoment.clone().add(dayCount, "day").format("YYYY-MM-DD")
     );
   }
 
@@ -103,15 +105,14 @@ export const generateEventLayouts = <T extends CalendarEvent>({
   } = {};
 
   calendarViewDateRanges.forEach((date) => {
+    const basisMoment = moment.tz(date.basisDate, timezone);
     const calendarLayoutOptions = {
       visibleX: date.dayIndexes,
       enableWeekBreaks: calendarViewInterval === "month",
-      startOfWeekXOffset: moment
-        .tz(date.basisDate, timezone)
-        .diff(
-          startOfUserWeek(startDayOfWeekOffset, date.basisDate!, timezone),
-          "days"
-        ),
+      startOfWeekXOffset: basisMoment.diff(
+        startOfUserWeek(startDayOfWeekOffset, date.basisDate!, timezone),
+        "days"
+      ),
     };
     const calendarViewDayLayout = _reduce(
       calendarViewDayEvents,
@@ -119,7 +120,7 @@ export const generateEventLayouts = <T extends CalendarEvent>({
         const eventStartIndex = moment
           .tz(event.start, timezone)
           .startOf("day")
-          .diff(moment.tz(date.basisDate, timezone), "days");
+          .diff(basisMoment, "days");
         const eventDurationDays = getDurationInDays(event, timezone);
 
         calendarLayout.findFitAndInsert(
@@ -139,16 +140,13 @@ export const generateEventLayouts = <T extends CalendarEvent>({
     calendarDates.forEach((calendarDate) => {
       const currentDayDate = moment.tz(calendarDate, timezone).startOf("day");
       const startDate = currentDayDate.toDate();
-      const endDate = moment.tz(startDate, timezone).endOf("day").toDate();
+      const endDate = currentDayDate.clone().endOf("day").toDate();
       const showHours = !["month"].includes(calendarViewInterval);
       const dayId = calendarDate;
       const allDayEventsLayout: AllDayEventLayoutType<T>[] = [];
       let partDayEventsLayout: PartDayEventLayoutType<T>[] = [];
 
-      const x = moment(startDate).diff(
-        moment.tz(date.basisDate, timezone),
-        "days"
-      );
+      const x = currentDayDate.diff(basisMoment, "days");
       for (let y = 0; y < calendarViewDayRowHeight; ++y) {
         const {
           event,