gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added custom render event on timetable

Browse Source
This commit is contained in:
sianida26 2024-06-25 03:25:22 +07:00
parent 4c3b66b2b5
commit 96412d49f7
2 changed files with 55 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
apps/frontend/src/components/Timetable/DayColumn.tsx
View File

@ -12,6 +12,7 @@ type Props = {
endTime: dayjs.Dayjs; endTime: dayjs.Dayjs;
events: Event[]; events: Event[];
renderCell?: (events: Event[]) => JSX.Element; renderCell?: (events: Event[]) => JSX.Element;
renderEvent?: (event: Event) => JSX.Element;
}; };
export default function DayColumn({ export default function DayColumn({
@ -20,6 +21,7 @@ export default function DayColumn({
endTime, endTime,
events, events,
renderCell, renderCell,
renderEvent,
}: Props) { }: Props) {
const isToday = day.isSame(dayjs(), "day"); const isToday = day.isSame(dayjs(), "day");
@ -40,7 +42,7 @@ export default function DayColumn({
return ( return (
// Base Cell // Base Cell
<div key={i} className="border-t h-20"> <div key={i} className="border-t h-20 relative">
{renderCell ? ( {renderCell ? (
<div className="w-full h-full relative"> <div className="w-full h-full relative">
{renderCell( {renderCell(
@ -66,56 +68,61 @@ export default function DayColumn({
)} )}
</div> </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 )}
.filter((event) => {
return ( {/* Events Container */}
currentDateTime.isSame( <div className="absolute w-full h-full top-0 left-0 flex gap-1 pr-1.5 pointer-events-none">
event.start, {events
"hour" .filter((event) => {
) || return (
(currentDateTime.isAfter(
event.start
) &&
currentDateTime.isBefore(
event.end
))
);
})
.map((event, i) =>
currentDateTime.isSame( currentDateTime.isSame(
event.start, event.start,
"hour" "hour"
) ? ( ) ||
<div (currentDateTime.isAfter(event.start) &&
key={i} currentDateTime.isBefore(event.end))
className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative" );
style={{ })
minHeight: "min-content", .map((event, i) =>
currentDateTime.isSame(
event.start,
"hour"
) ? (
<div
key={i}
className="w-full z-10 relative pointer-events-auto"
style={{
minHeight: "min-content",
// The height is calculated from the duration of the event in minutes, converted to a percentage of an hour, // The height is calculated from the duration of the event in minutes, converted to a percentage of an hour,
// plus an additional number of pixels equivalent to the number of hours in the event duration // plus an additional number of pixels equivalent to the number of hours in the event duration
height: `calc(${ height: `calc(${
(event.end.diff( (event.end.diff(
event.start, event.start,
"minute" "minute"
) * ) *
100) / 100) /
60 60
}% + ${event.end.diff(event.start, "hour")}px)`, }% + ${event.end.diff(event.start, "hour")}px)`,
// The top position is calculated from the start minute of the event, converted to a percentage of an hour // The top position is calculated from the start minute of the event, converted to a percentage of an hour
top: `${(event.start.minute() * 100) / 60}%`, top: `${(event.start.minute() * 100) / 60}%`,
}} }}
> >
{event.title} {renderEvent ? (
</div> renderEvent(event)
) : ( ) : (
<div className="w-full"></div> <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>
) : (
<div className="w-full"></div>
)
)}
</div>
</div> </div>
); );
})} })}

2
apps/frontend/src/components/Timetable/Timetable.tsx
View File

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