Merge pull request #345 from rwilson504/Issue-339

rwilson504 · web-flow · commit 0a320a63cc7b · 2025-06-03T13:24:43.000-04:00
fixes #339
diff --git a/Calendar/Calendar/CalendarControl.tsx b/Calendar/Calendar/CalendarControl.tsx
@@ -13,7 +13,7 @@ import {
   momentLocalizer,
   View,
   SlotInfo,
-  EventProps,ResourceHeaderProps
+  EventProps, ResourceHeaderProps
 } from "react-big-calendar";
 import * as CalendarUtils from "./utils";
 import { StartOfWeek } from "date-arithmetic";
@@ -23,7 +23,7 @@ import * as moment from "moment";
 import { useCalendarHourRange, useDayLayoutAlgorithm, useEventSelectable, useCalendarSelectable, useCalendarStepAndTimeslots, useCalendarDate, useCalendarPopup, useEventHeaderFormat, useCalendarView, useCalendarData, useCalendarColors } from "./hooks";
 import { eventPropsGetter, dayPropsGetter } from "./getters";
 import { handleSlotSelect, handleEventSelected, handleEventKeyPress, handleOnView, handleNavigate } from "./handlers";
-import { timeGutterHeaderRenderer, resourceHeaderRenderer, agendaEventRenderer } from "./renderers";
+import { timeGutterHeaderRenderer, resourceHeaderRenderer, agendaEventRenderer,timeSlotWrapperRenderer } from "./renderers";
 import { tooltipAccessor } from "./accessors/tooltipAccessor";
 export interface IProps {
   pcfContext: ComponentFramework.Context<IInputs>;
@@ -206,12 +206,13 @@ export const CalendarControl: React.FC<IProps> = (props) => {
       className={`rbc-view-${calendarView}`}
       eventPropGetter={_eventPropsGetter}
       dayPropGetter={_dayPropsGetter}
-      tooltipAccessor= {tooltipAccessor}
+      tooltipAccessor={tooltipAccessor}
       components={{
         agenda: {
           event: agendaEvent,
         },
         timeGutterHeader: timeGutterHeader,
+        timeSlotWrapper: (props) => timeSlotWrapperRenderer({ ...props, timeslots }),
       }}
     />
   ) : (
@@ -243,13 +244,14 @@ export const CalendarControl: React.FC<IProps> = (props) => {
       className={`rbc-view-${calendarView}`}
       eventPropGetter={_eventPropsGetter}
       dayPropGetter={_dayPropsGetter}
-      tooltipAccessor= {tooltipAccessor}
+      tooltipAccessor={tooltipAccessor}
       components={{
         agenda: {
           event: agendaEvent,
         },
         resourceHeader: resourceHeader,
         timeGutterHeader: timeGutterHeader,
+        timeSlotWrapper: (props) => timeSlotWrapperRenderer({ ...props, timeslots }),
       }}
     />
   );
diff --git a/Calendar/Calendar/renderers/index.ts b/Calendar/Calendar/renderers/index.ts
@@ -1,3 +1,4 @@
 export * from "./resourceHeaderRenderer";
 export * from "./agendaEventRenderer"
-export * from "./timeGutterHeaderRenderer"
+export * from "./timeGutterHeaderRenderer"
+export * from "./timeSlotWrapperRenderer"
diff --git a/Calendar/Calendar/renderers/timeSlotWrapperRenderer.tsx b/Calendar/Calendar/renderers/timeSlotWrapperRenderer.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+
+// Modularized time slot wrapper renderer for react-big-calendar
+// Encapsulate minHeight logic here, allowing for dynamic calculation if needed
+export function timeSlotWrapperRenderer(props: { children?: React.ReactNode; timeslots?: number }) {
+  const { children, timeslots } = props;
+  let minHeight = 40;
+  if (typeof timeslots === "number") {
+    minHeight = timeslots === 1 ? 40 : 20;
+  }
+  return <div style={{ minHeight }}>{children}</div>;
+}
