diff --git a/library/src/components/timetable/TimeTable.tsx b/library/src/components/timetable/TimeTable.tsx index 4d57b986..d1f33dd6 100644 --- a/library/src/components/timetable/TimeTable.tsx +++ b/library/src/components/timetable/TimeTable.tsx @@ -566,7 +566,8 @@ function moveNowBar( const tableBody = tableBodyRef.current // remove the orange border from the header cell - const headerTimeslotRow = tableHeader.children[1] + const headerTimeslotRow = + tableHeader.children[tableHeader.children.length - 1] if (!headerTimeslotRow) { setMessage?.({ appearance: "danger", diff --git a/library/src/components/timetable/TimeTableHeader.tsx b/library/src/components/timetable/TimeTableHeader.tsx index 1d92226f..ac682f8e 100644 --- a/library/src/components/timetable/TimeTableHeader.tsx +++ b/library/src/components/timetable/TimeTableHeader.tsx @@ -369,7 +369,7 @@ function CustomHeaderRowCell< key={`timeheader${timeSlot.unix()}`} colSpan={2} className={`${headerCellBaseClassname} ${ - isLastOfDay ? "after:border-l-2" : "" + isLastOfDay ? "after:border-l-2" : "after:border-l" } ${showTimeSlotHeader ? "pt-1" : ""}`} ref={ref} > diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt index 1658838d..f0db20b7 100644 --- a/showcase/public/showcase-sources.txt +++ b/showcase/public/showcase-sources.txt @@ -7936,21 +7936,33 @@ function TestCustomHeaderRowTimeSlot< viewType, slotsArray, entries, + tableCellRef, }: TimeTableTypes.CustomHeadeRowTimeSlotProps) { const groupItems = entries[1].items - const startAndEndSlots = groupItems.map((it) => - timeTableUtils.getStartAndEndSlot( - it, + const groupItemsOfCell: I[] = [] + const startAndEndInSlow: { + status: "in" | "before" | "after" + startSlot: number + endSlot: number + }[] = [] + for (let i = 0; i < groupItems.length; i++) { + const item = groupItems[i] + const startAndEnd = timeTableUtils.getStartAndEndSlot( + item, slotsArray, timeFrameOfDay, timeSlotMinutes, viewType, - ), - ) + ) + if (slotsArray[startAndEnd.startSlot] === timeSlot) { + groupItemsOfCell.push(item) + startAndEndInSlow.push(startAndEnd) + } + } - const getLeftAndWidth = groupItems.map((it, i) => { - const startAndEnd = startAndEndSlots[i] + const leftAndWidths = groupItemsOfCell.map((it, i) => { + const startAndEnd = startAndEndInSlow[i] if (startAndEnd.status === "before" || startAndEnd.status === "after") { return null } @@ -7965,8 +7977,27 @@ function TestCustomHeaderRowTimeSlot< ) }) - console.log("GET LEFT AND WIDTH", getLeftAndWidth) - return
{startAndEndSlots.length}
+ const cellWidth = tableCellRef.current?.offsetWidth ?? 70 + + const ret = leftAndWidths.map((it, i) => + it ? ( +
+
{groupItemsOfCell[i].title}
+
+ ) : null, + ) + + console.log("RET", ret, leftAndWidths) + + return <>{ret} } function CustomHeaderRowHeader< diff --git a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx index cf78010c..143bd692 100644 --- a/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx +++ b/showcase/src/components/showcase/wrapper/TimeTableShowcase.tsx @@ -458,8 +458,6 @@ function TestCustomHeaderRowTimeSlot< } } - console.log("GROUP ITEMS", groupItemsOfCell) - const leftAndWidths = groupItemsOfCell.map((it, i) => { const startAndEnd = startAndEndInSlow[i] if (startAndEnd.status === "before" || startAndEnd.status === "after") { @@ -482,19 +480,18 @@ function TestCustomHeaderRowTimeSlot< it ? (
- {groupItemsOfCell[i].title} +
{groupItemsOfCell[i].title}
) : null, ) - console.log("RET", ret, leftAndWidths) - return <>{ret} }