From 5899125b83df2ae808d6da952bf706d844bbd7f7 Mon Sep 17 00:00:00 2001
From: Giorgio Mandolini <g.mandolini@gmail.com>
Date: Thu, 25 Apr 2024 07:32:33 +0200
Subject: [PATCH] fix: events disappear when start/end dates are out of grid
 bounds

---
 src/lib/components/events/TodayEvents.tsx | 11 ++++++++---
 src/lib/components/week/WeekTable.tsx     |  4 +++-
 src/lib/views/Day.tsx                     |  1 +
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/events/TodayEvents.tsx b/src/lib/components/events/TodayEvents.tsx
index fef9faf..c2b6588 100644
--- a/src/lib/components/events/TodayEvents.tsx
+++ b/src/lib/components/events/TodayEvents.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { ProcessedEvent } from "../../types";
 import EventItem from "./EventItem";
-import { differenceInMinutes } from "date-fns";
+import { differenceInMinutes, setHours } from "date-fns";
 import { isTimeZonedToday, traversCrossingEvents } from "../../helpers/generals";
 import { BORDER_HEIGHT } from "../../helpers/constants";
 import CurrentTimeBar from "./CurrentTimeBar";
@@ -10,6 +10,7 @@ interface TodayEventsProps {
   todayEvents: ProcessedEvent[];
   today: Date;
   startHour: number;
+  endHour: number;
   step: number;
   minuteHeight: number;
   direction: "rtl" | "ltr";
@@ -19,6 +20,7 @@ const TodayEvents = ({
   todayEvents,
   today,
   startHour,
+  endHour,
   step,
   minuteHeight,
   direction,
@@ -39,10 +41,13 @@ const TodayEvents = ({
       )}
 
       {todayEvents.map((event, i) => {
-        const height = differenceInMinutes(event.end, event.start) * minuteHeight - BORDER_HEIGHT;
+        const maxHeight = (endHour * 60 - startHour * 60) * minuteHeight;
+        const eventHeight = differenceInMinutes(event.end, event.start) * minuteHeight;
+        const height = Math.min(eventHeight, maxHeight) - BORDER_HEIGHT;
+
         const calendarStartInMins = startHour * 60;
         const eventStartInMins = event.start.getHours() * 60 + event.start.getMinutes();
-        const minituesFromTop = Math.abs(calendarStartInMins - eventStartInMins);
+        const minituesFromTop = Math.max(eventStartInMins - calendarStartInMins, 0);
 
         const topSpace = minituesFromTop * minuteHeight;
         /** Add border factor to height of each slot */
diff --git a/src/lib/components/week/WeekTable.tsx b/src/lib/components/week/WeekTable.tsx
index 8e7d039..b2e86fb 100644
--- a/src/lib/components/week/WeekTable.tsx
+++ b/src/lib/components/week/WeekTable.tsx
@@ -57,7 +57,8 @@ const WeekTable = ({
     timeZone,
     stickyNavigation,
   } = useStore();
-  const { startHour, step, cellRenderer, disableGoToDay, headRenderer, hourRenderer } = week!;
+  const { startHour, endHour, step, cellRenderer, disableGoToDay, headRenderer, hourRenderer } =
+    week!;
   const { renderedSlots } = usePosition();
   const { headersRef, bodyRef } = useSyncScroll();
   const MULTI_SPACE = MULTI_DAY_EVENT_HEIGHT;
@@ -177,6 +178,7 @@ const WeekTable = ({
                       today={date}
                       minuteHeight={minutesHeight}
                       startHour={startHour}
+                      endHour={endHour}
                       step={step}
                       direction={direction}
                       timeZone={timeZone}
diff --git a/src/lib/views/Day.tsx b/src/lib/views/Day.tsx
index bc68912..1ab47fc 100644
--- a/src/lib/views/Day.tsx
+++ b/src/lib/views/Day.tsx
@@ -187,6 +187,7 @@ const Day = () => {
                       today={START_TIME}
                       minuteHeight={MINUTE_HEIGHT}
                       startHour={startHour}
+                      endHour={endHour}
                       step={step}
                       direction={direction}
                       timeZone={timeZone}