Added custom render event on timetable

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

@@ -12,6 +12,7 @@ type Props = {
 	endTime: dayjs.Dayjs;
 	events: Event[];
 	renderCell?: (events: Event[]) => JSX.Element;
+	renderEvent?: (event: Event) => JSX.Element;
 };
 
 export default function DayColumn({
@@ -20,6 +21,7 @@ export default function DayColumn({
 	endTime,
 	events,
 	renderCell,
+	renderEvent,
 }: Props) {
 	const isToday = day.isSame(dayjs(), "day");
 
@@ -40,7 +42,7 @@ export default function DayColumn({
 
 				return (
 					// Base Cell
-					<div key={i} className="border-t h-20">
+					<div key={i} className="border-t h-20 relative">
 						{renderCell ? (
 							<div className="w-full h-full relative">
 								{renderCell(
@@ -66,7 +68,11 @@ export default function DayColumn({
 								)}
 							</div>
 						) : (
-							<div className="flex pr-1.5 w-full gap-1 relative hover:bg-gray-100 h-full">
+							<button className="flex pr-1.5 w-full gap-1 relative hover:bg-gray-100 h-full"></button>
+						)}
+
+						{/* Events Container */}
+						<div className="absolute w-full h-full top-0 left-0 flex gap-1 pr-1.5 pointer-events-none">
 							{events
 								.filter((event) => {
 									return (
@@ -74,12 +80,8 @@ export default function DayColumn({
 											event.start,
 											"hour"
 										) ||
-											(currentDateTime.isAfter(
-												event.start
-											) &&
-												currentDateTime.isBefore(
-													event.end
-												))
+										(currentDateTime.isAfter(event.start) &&
+											currentDateTime.isBefore(event.end))
 									);
 								})
 								.map((event, i) =>
@@ -89,7 +91,7 @@ export default function DayColumn({
 									) ? (
 										<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"
+											className="w-full z-10 relative pointer-events-auto"
 											style={{
 												minHeight: "min-content",
 
@@ -108,14 +110,19 @@ export default function DayColumn({
 												top: `${(event.start.minute() * 100) / 60}%`,
 											}}
 										>
+											{renderEvent ? (
+												renderEvent(event)
+											) : (
+												<button className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full h-full flex items-start justify-start">
 													{event.title}
+												</button>
+											)}
 										</div>
 									) : (
 										<div className="w-full"></div>
 									)
 								)}
 						</div>
-						)}
 					</div>
 				);
 			})}

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

@@ -17,6 +17,7 @@ type Props = {
 	endTime?: dayjs.Dayjs;
 	events: Event[];
 	renderCell?: (events: Event[]) => JSX.Element;
+	renderEvent?: (event: Event) => JSX.Element;
 };
 
 export default function Timetable({ events, ...props }: Props) {
@@ -94,6 +95,7 @@ export default function Timetable({ events, ...props }: Props) {
 						startTime={startTime}
 						endTime={endTime}
 						renderCell={props.renderCell}
+						renderEvent={props.renderEvent}
 					/>
 				))}
 			</div>