fix: events disappear when start/end dates are out of grid bounds

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 */

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}

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}