diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx index 55a3f23..870caf2 100644 --- a/task_yell/src/app/home/page.tsx +++ b/task_yell/src/app/home/page.tsx @@ -107,7 +107,7 @@ function EventCreator({ onCancel, initialTitle = "", targetDate, - events + events, }: { onSave: (event: Event) => void; onCancel: () => void; @@ -149,54 +149,77 @@ function EventCreator({ // 選択された日のスケジュールを描画する関数 const renderDaySchedule = () => { // 選択された日のイベントをフィルタリング - const dayEvents = events.filter(event => isSameDay(event.start, selectedDate)) - const hours = Array.from({ length: 24 }, (_, i) => i) + const dayEvents = events.filter((event) => + isSameDay(event.start, selectedDate), + ); + const hours = Array.from({ length: 24 }, (_, i) => i); - const sortedEvents = dayEvents.sort((a, b) => a.start.getTime() - b.start.getTime()) + const sortedEvents = dayEvents.sort( + (a, b) => a.start.getTime() - b.start.getTime(), + ); return (
-

{format(selectedDate, 'yyyy年MM月dd日 (E)', { locale: ja })}のスケジュール

-
- {hours.map(hour => ( -
- {`${hour.toString().padStart(2, '0')}:00`} +

+ {format(selectedDate, "yyyy年MM月dd日 (E)", { locale: ja })} + のスケジュール +

+
+ {hours.map((hour) => ( +
+ {`${hour.toString().padStart(2, "0")}:00`}
{sortedEvents - .filter(event => getHours(event.start) === hour) + .filter((event) => getHours(event.start) === hour) .map((event, index) => { - const startMinutes = event.start.getMinutes() - const duration = (event.end.getTime() - event.start.getTime()) / (1000 * 60) - const height = `${duration}px` - const top = `${startMinutes}px` - const width = index === 0 ? '200%' : '150%' - const left = index === 0 ? '0%' : `${50 * Math.min(index, 3)}%` - const zIndex = index + 1 + const startMinutes = event.start.getMinutes(); + const duration = + (event.end.getTime() - event.start.getTime()) / + (1000 * 60); + const height = `${duration}px`; + const top = `${startMinutes}px`; + const width = index === 0 ? "200%" : "150%"; + const left = + index === 0 ? "0%" : `${50 * Math.min(index, 3)}%`; + const zIndex = index + 1; return (
-
{event.title}
-
{`${format(event.start, 'HH:mm')} - ${format(event.end, 'HH:mm')}`}
+
+ {event.title} +
+
{`${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`}
- ) + ); })}
))}
- ) - } + ); + }; return (
-
- {renderDaySchedule()} -
+
{renderDaySchedule()}
handleDateSelect(day)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}