@sunsama/event-calendar 0.13.1 → 0.13.4

package/src/utils/calendar-layout.ts

@@ -1,4 +1,3 @@
-import { max } from "lodash";
 import { EventExtend } from "../types";
 
 export class CalendarLayout {
@@ -9,6 +8,8 @@ export class CalendarLayout {
   visibleX: Set<number>;
   enableWeekBreaks: boolean;
   startOfWeekXOffset: number;
+  private cachedHeight: number = 0;
+  private cachedHeightDirty: boolean = true;
 
   constructor({
     visibleX,
@@ -36,6 +37,7 @@ export class CalendarLayout {
       this.array2d[x] = column;
     }
     column[y] = value;
+    this.cachedHeightDirty = true;
   }
   // assign value to the line of cells from (x, y) to (x + w, y)
   setRange(x: number, y: number, duration: number, value: any) {
@@ -71,9 +73,18 @@ export class CalendarLayout {
   }
   // find the height of the 2d array
   height() {
-    return this.array2d.length > 0
-      ? max(this.array2d.map((col) => (col && col.length) || 0))
-      : 0;
+    if (!this.cachedHeightDirty) {
+      return this.cachedHeight;
+    }
+    let maxHeight = 0;
+    for (const col of this.array2d) {
+      if (col && col.length > maxHeight) {
+        maxHeight = col.length;
+      }
+    }
+    this.cachedHeight = maxHeight;
+    this.cachedHeightDirty = false;
+    return this.cachedHeight;
   }
   // get the event and associated view data for the given cell
   getViewAt(x: number, y: number) {

package/src/utils/compute-positioning.ts

@@ -14,9 +14,10 @@ const computePositioning = <T extends CalendarEvent>({
   timezone,
 }: ComputePositioning<T>): EventPosition => {
   const startDateMoment = moment.tz(collisionObject.event.start, timezone);
-  const durationMinutes = moment
-    .tz(collisionObject.event.end, timezone)
-    .diff(startDateMoment, "minutes");
+  const durationMinutes =
+    (new Date(collisionObject.event.end).getTime() -
+      new Date(collisionObject.event.start).getTime()) /
+    60000;
 
   let width = 100;
   let margin = 0;

package/src/utils/date-utils.ts

@@ -2,6 +2,28 @@ 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;
+}
+
 export const generatePrefabHours = (
   timeFormat: string = "HH:mm"
 ): PrefabHour[] => {
@@ -62,15 +84,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 +105,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 +131,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

@@ -76,16 +76,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 +100,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 +115,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 +135,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,