Added render cell on timeline

apps/frontend/src/components/Timetable/DayColumn.tsx

@@ -11,9 +11,16 @@ type Props = {
 	startTime: dayjs.Dayjs;
 	endTime: dayjs.Dayjs;
 	events: Event[];
+	renderCell?: (events: Event[]) => JSX.Element;
 };
 
-export default function DayColumn({ day, startTime, endTime, events }: Props) {
+export default function DayColumn({
+	day,
+	startTime,
+	endTime,
+	events,
+	renderCell,
+}: Props) {
 	const isToday = day.isSame(dayjs(), "day");
 
 	return (
@@ -32,15 +39,12 @@ export default function DayColumn({ day, startTime, endTime, events }: Props) {
 				const currentDateTime = day.hour(startTime.hour() + i);
 
 				return (
-					<button
+					// Base Cell
-						key={i}
+					<div key={i} className="border-t h-20">
-						className="border-t h-20 hover:bg-gray-100 flex pr-1.5 gap-1 relative"
+						{renderCell ? (
-					>
+							<div className="w-full h-full relative">
-						{/* <div className="absolute top-1 right-1 text-sm text-gray-500 rounded-full size-6 bg-gray-100 flex items-center justify-center">
+								{renderCell(
-							5
+									events.filter((event) => {
-						</div> */}
-						{events
-							.filter((event) => {
 										// return event.start.isSame(
 										// 	startTime.add(i, "h"),
 										// 	"hour"
@@ -51,12 +55,38 @@ export default function DayColumn({ day, startTime, endTime, events }: Props) {
 												event.start,
 												"hour"
 											) ||
-									(currentDateTime.isAfter(event.start) &&
+											(currentDateTime.isAfter(
-										currentDateTime.isBefore(event.end))
+												event.start
+											) &&
+												currentDateTime.isBefore(
+													event.end
+												))
+										);
+									})
+								)}
+							</div>
+						) : (
+							<div className="flex pr-1.5 w-full gap-1 relative hover:bg-gray-100 h-full">
+								{events
+									.filter((event) => {
+										return (
+											currentDateTime.isSame(
+												event.start,
+												"hour"
+											) ||
+											(currentDateTime.isAfter(
+												event.start
+											) &&
+												currentDateTime.isBefore(
+													event.end
+												))
 										);
 									})
 									.map((event, i) =>
-								currentDateTime.isSame(event.start, "hour") ? (
+										currentDateTime.isSame(
+											event.start,
+											"hour"
+										) ? (
 											<div
 												key={i}
 												className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative"
@@ -84,10 +114,9 @@ export default function DayColumn({ day, startTime, endTime, events }: Props) {
 											<div className="w-full"></div>
 										)
 									)}
-						{/* {Math.random() < 0.1 && (
+							</div>
-							<div className="bg-purple-200/80 rounded-md w-full h-full"></div>
+						)}
-						)} */}
+					</div>
-					</button>
 				);
 			})}
 		</div>

apps/frontend/src/components/Timetable/Timetable.tsx

@@ -13,14 +13,17 @@ dayjs.extend(isoWeek);
 dayjs.extend(customParseFormat);
 
 type Props = {
+	startTime?: dayjs.Dayjs;
+	endTime?: dayjs.Dayjs;
 	events: Event[];
+	renderCell?: (events: Event[]) => JSX.Element;
 };
 
-export default function Timetable({ events }: Props) {
+export default function Timetable({ events, ...props }: Props) {
 	const [currentDate, setCurrentDate] = useState(dayjs());
 
-	const startTime = dayjs("08:00", "HH:mm");
+	const startTime = props.startTime ?? dayjs("08:00", "HH:mm");
-	const endTime = dayjs("18:00", "HH:mm");
+	const endTime = props.endTime ?? dayjs("18:00", "HH:mm");
 
 	const weekDays = useMemo(() => {
 		const startOfWeek = currentDate.startOf("isoWeek");
@@ -90,6 +93,7 @@ export default function Timetable({ events }: Props) {
 						events={eventPerDay[i]}
 						startTime={startTime}
 						endTime={endTime}
+						renderCell={props.renderCell}
 					/>
 				))}
 			</div>