feat: add event rows to Show Page Calendar tab (#4319)

* feat: add event rows to Show Page Calendar tab

Closes #4287

* refactor: use time as events group key instead of ISO string for easier sorting

* feat: implement data model changes

* refactor: improve sorting

packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx

@@ -0,0 +1,41 @@
+import { startOfDay } from 'date-fns';
+
+import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { Card } from '@/ui/layout/card/components/Card';
+import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
+import { sortDesc } from '~/utils/sort';
+
+type CalendarMonthCardProps = {
+  calendarEvents: CalendarEvent[];
+};
+
+export const CalendarMonthCard = ({
+  calendarEvents,
+}: CalendarMonthCardProps) => {
+  const calendarEventsByDayTime = groupArrayItemsBy(
+    calendarEvents,
+    ({ startsAt }) => startOfDay(startsAt).getTime(),
+  );
+  const sortedDayTimes = Object.keys(calendarEventsByDayTime)
+    .map(Number)
+    .sort(sortDesc);
+
+  return (
+    <Card fullWidth>
+      {sortedDayTimes.map((dayTime, index) => {
+        const dayCalendarEvents = calendarEventsByDayTime[dayTime];
+
+        return (
+          !!dayCalendarEvents?.length && (
+            <CalendarDayCardContent
+              key={dayTime}
+              calendarEvents={dayCalendarEvents}
+              divider={index < sortedDayTimes.length - 1}
+            />
+          )
+        );
+      })}
+    </Card>
+  );
+};